Ionic 2: iOS navbar height too large when component with button+badge inserted.

[daveshirman]

Short description of the problem:

If you declare a custom component with a button that contains a badge or an icon and import it into a navbar, the height of the component is too large, causing the navbar to swell in height on iOS.

What behavior are you expecting?

Navbar height is not affected, component height is correct.

Steps to reproduce:

1. Make a component with a button containing a badge or an icon (see code block).
2. Import that component into the page template navbar.
3. Observe swollen navbar.

custom-component template:

      <button>
          <ion-badge complete>3</ion-badge>
      </button>

page navbar template:

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons end>
      <custom-component></custom-component>      
    </ion-buttons>
    <ion-title>My Jobs</ion-title>
  </ion-navbar>
</ion-header>
// etc...

Result:

Which Ionic Version?
2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v4.3.0
Xcode version: Xcode 7.2.1 Build version 7C1002 

[brandyscarney]

This is caused by the bar-button classes not applying since you are nesting the button in another component. Issue #5927 was created for this, there's a workaround to add the category to the button. In your case something like this:

  <button category="bar-button">
      <ion-badge complete>3</ion-badge>
  </button>

Thanks!

[daveshirman]

Great, thanks.

[daveshirman]

Hi @brandyscarney this issue has regressed with the removal of the category attribute.

I have update my html to be:

<button ion-button icon-only (click)="showNotificationsModal()">
    <ion-icon *ngIf="notificationsCount == 0" name="cloud-upload"></ion-icon>
    <ion-badge *ngIf="notificationsCount > 0" color="complete">{{notificationsCount}}</ion-badge>
</button>

But now it looks like this:

[manucorporat]

@daveshirman
try this:

<button ion-button="bar-button" icon-only (click)="showNotificationsModal()">
    <ion-icon *ngIf="notificationsCount == 0" name="cloud-upload"></ion-icon>
    <ion-badge *ngIf="notificationsCount > 0" color="complete">{{notificationsCount}}</ion-badge>
</button>

Now category is passed like this: ion-button="bar-button"

[daveshirman]

Perfect. Thank you.