How to align buttons in toolbar to left or right?

Ionic Framework ionic-v3
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

1 Like
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.

1 Like
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>
1 Like
13

worked for me. Thanks

2 Likes