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?

here is how I did it

<IonRow>
  <IonCol>
    <div className="ion-float-end">
      <IonButton routerLink={`/edit-location/${p._id}`}>
        EDIT
      </IonButton>
      <IonButton
        onClick={() => handleDelete(p._id + 10)}
        color="danger"
      >
        DELETE
      </IonButton>
    </div>
  </IonCol>
</IonRow>

1 Like