Search code examples
angularionic-frameworkionic4

Ionic 4 toolbar not aligning

I am using angular 8/ionic 4. Has anyone seen this problem with the toolbar not aligning:

enter image description here

Here is the code I have for the footer of tab2.page.html:

<ion-footer>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only color="royal">
        <ion-icon name="create"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Send To...</ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="royal" (click)="displayAdd()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

I created a tabs application using ionic start command.

Solution

  • Sergey, that was the answer! I had to update some of the code to Ionic 4 syntax:

    <ion-footer>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="create" color="royal"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="displayAdd()">
        <ion-icon slot="icon-only" name="add" color="royal"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>