How to right-align a button in a column in the grid?

I have a couple buttons that I want to right-align in a grid.

This works:

        <IonGrid>
          <IonRow className="ion-justify-content-end">
            <IonButton routerLink={routeButtonOne} size="default">
              Button One
            </IonButton>
            <IonButton routerLink={routeButtonTwo} size="default">
              <IonIcon slot="start" icon={folderOutline} size="large" />
              Button Two
            </IonButton>
          </IonRow>
       </IonGrid>

However, doing it in the way I did above is incorrect according to the documentation, which states:

• Content should be placed within columns, and only columns may be immediate children of rows.

So I did this:

        <IonGrid>
          <IonRow className="ion-justify-content-end">
            <IonCol>
              <IonButton routerLink={routeButtonOne} size="default">
                Button One
              </IonButton>
            </IonCol>
            <IonCol>
              <IonButton routerLink={routeButtonTwo} size="default">
                <IonIcon slot="start" icon={folderOutline} size="large" />
                Button Two
              </IonButton>
            </IonCol>
          </IonRow>
       </IonGrid>

But now the buttons are aligned left, not right. So how do I get the buttons aligned with the right side of the screen?

I can fix it in CSS like this:

ion-row.ion-justify-content-end ion-col {
  display: flex;
  justify-content: flex-end;
}

But this seems like something the grid should be able to do out of the box. Am I missing something?

1 post - 1 participant

Read full topic