How to align buttons to left and right of page

Ionic Framework ionic-v3
1

If I use the code below it puts the buttons to the left and right but they are on different rows.
Anyway to do this or do I need to use an ion-grid?

<ion-content>
<ion-buttons start>
  <button ion-button outline color="primary">Close</button>
</ion-buttons>
<ion-buttons end>
  <button ion-button outline color="primary">Back</button>
  <button ion-button outline color="secondary">Save</button>
</ion-buttons>
</ion-content>
2

Look at using the ion-grid to provide the positioning you are looking for. Also ion-buttons should only be used in the ion-toolbar component and not in ion-content.

3

I tried using ion-grid but could not get that to work as required. I will have another shot.
Its actually in the ion-footer now I’m assuming that is ok for ion-buttons.

4

try this:

<ion-content>
<ion-item>
  <button ion-button outline item-start color="primary">Close</button>

  <button ion-button outline item-end color="primary">Back</button>
  <button ion-button outline item-end color="secondary">Save</button>
</ion-item>
</ion-content>

You can use item-end and item-start to set the alignment. Note that it only works if your component with item-start/end is inside a ion-item.

1 Like
5

I actually tried something similar earlier. While this does work for some reason it makes the buttons small and has an underline.
I can probably resolve this fairly easily though. I think I know how to get rid of the item underline I will have a play.

Cheers

6

I ended up getting this working in Ionic 3 using the below.

 <ion-buttons end>
      <button ion-button color="danger" (click)="navCtrl.pop()">Cancel</button>
      <button ion-button outline color="secondary" (click)="onCreateIssue()" [disabled]="!form.dirty || form.invalid">Save</button>
    </ion-buttons>

Now I can’t get it to work in Ionic 4.
If I use the ion-buttons element it makes the buttons small and till doesn’t align to the right.

 <!-- <ion-buttons end> -->
      <ion-button fill="outline" size="default" color="dark" (click)="onClearPad()">Clear</ion-button>
      <ion-button fill="solid" size="default" color="danger" (click)="onCancel()">Cancel</ion-button>
      <ion-button fill="solid" size="default" color="primary" (click)="onSavePad()">Save</ion-button>
  <!-- </ion-buttons> -->
7

Got it in V4.

 <div class="ion-text-end">
          <ion-button fill="outline" size="default" color="dark" (click)="onClearPad()">Clear</ion-button>
          <ion-button fill="solid" size="default" color="danger" (click)="onCancel()">Cancel</ion-button>
          <ion-button  fill="solid" size="default" color="primary" (click)="onSavePad()">Save</ion-button>
      </div>
6 Likes
8

thnxxx.its working but i want 2 buttons in same row at the start and end both…

9

very simple. apply the following CSS class to div.

div {
    display: flex;
    justify-content: space-between;
}
1 Like
10

@hirenkorat3
Thanks very much for this! Can’t believe how simple it can be when you know what you’re doing!

We’re using it in the following row and it works perfectly!

	<ion-row style="display: flex;  justify-content: space-between;">
      <div>
        <ion-item lines="none">
          <span>..</span> <ion-toggle #toggle slot="start"></ion-toggle>
        </ion-item>
      </div>
      
      <div>
        <ion-button>
          <span>...</span>
          <ion-icon></ion-icon>
        </ion-button>
      </div>
    </ion-row>