How to align buttons to left and right of page


#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.


#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