How to align buttons in toolbar to left or right?


#1

I’ve got the following footer with two buttons:


<ion-footer>
  <ion-toolbar>
    <button ion-button color="royal">
      {{ 'ok' | translate }}
    </button>
    <button ion-button color="light">
      {{ 'cancel' | translate }}
    </button>
  </ion-toolbar>
</ion-footer>

Both buttons are currently aligned to right. How can I move both of them to the left of toolbar?


#2

Use ion-buttons, and I think best style is to use “start” and “end” instead of left or right, because that automatically puts the buttons where you want depending on whether your language reads left-to-right or right-to-left.


#3

I tried the following and it didn’t work:

<ion-footer>
  <ion-toolbar>
    <ion-buttons end>
      <button ion-button color="royal">
        {{ 'ok' | translate }}
      </button>
      <button ion-button color="light">
        {{ 'cancel' | translate }}
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

After wrapping buttons with <ion-buttons>, things get messy. Now only “Ok” button is shown without having any style and color.


#4

I wonder if there is any documentation for <ion-buttons>? I searched and failed to find any.


#5

That might be an issue with the length of your toolbar. I’ve only put icon buttons in a toolbar, so I don’t have experience with something as long as “cancel.” Are you sure a toolbar is what you want?


#6

Also: https://ionicframework.com/docs/components/#toolbar-buttons


#7

Based on the toolbar documentation, footer should contain a toolbar:

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

That’s why I have a toolbar. And that toolbar seems to be the culprit here! After removing the toolbar:

<ion-footer>
  <ion-buttons end>
    <button ion-button color="light">
      {{ 'cancel' | translate }}
    </button>
    <button ion-button color="royal">
      {{ 'ok' | translate }}
    </button>
  </ion-buttons>
</ion-footer>

Everything works as expected! So I guess there is something wrong with the documentation and it should be fixed.


#8

I still wonder why <ion-toolbar> cannot be used inside <ion-footer> while the documentation clearly states it’s allowed. Even <ion-navbar> is always placed inside <ion-header> without any problem. Should we consider this a bug? Has anybody ever successfully used <ion-buttons> inside <ion-toolbar>?


#9

I found the same problem has been discussed here: Ion-footer with ion-toolbar and ion-buttons not styled correctly


#10

Try this working demo :

<ion-footer>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only color="royal">
          cancel
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button icon-only color="royal">
        ok
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

#12
  • <ion-buttons left>
    
  •   <button ion-button icon-only color="royal">
    
  •       cancel
    
  •   </button>
    
  • </ion-buttons>
    
  • <ion-buttons end>
    
  •   <button ion-button icon-only color="royal">
    
  •     ok
    
  •   </button>
    
  • </ion-buttons>