IOS Navbar Swelling

jicee13 · February 23, 2018, 4:57pm

So on Android everything looks fine, however on IOS the navbar swells quite a bit and the icons are off center. Any suggestions on how to fix this?

android iphone

ChrisGriiffith · February 23, 2018, 5:39pm

Can you supply the HTML you use?

jicee13 · February 23, 2018, 7:06pm

Yup here you go.

<ion-header>

  <ion-navbar >
    <button  ion-button="bar-button" float-left ion-button icon-only clear (click)="presentAlerts($event)">
      <ion-badge *ngIf="hasUnread" color="danger">{{totalUnread}}</ion-badge>
      <ion-icon name="appname-customicon1"></ion-icon>
    </button>
    <button ion-button="bar-button" clear float-right ion-button small icon-only (click)="presentPopover($event)">
      <ion-icon name="more"></ion-icon>
    </button>
  </ion-navbar>

</ion-header>

ChrisGriiffith · February 23, 2018, 9:53pm

Buttons in headers require you to use the <ion-buttons> tag, otherwise, weirdness in the layout can happen. I also removed some other attributes that I think were not needed:


  <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="presentAlerts($event)">
        <ion-badge *ngIf="hasUnread" color="danger">{{totalUnread}}</ion-badge>
        <ion-icon name="appname-customicon1"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons right>
      <button ion-button icon-only small (click)="presentPopover($event)">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>```

jicee13 · February 23, 2018, 10:53pm

Awesome thanks for that. I’m using your code now and it reduced the swelling. One more followup question. How do I vertically align the icons in the navbar? Android seems fine but IOS is still thrown off a little…