Ionic-framework: Ionic 2 - menuToggle breaks navbar when there are more than one button in the <ion-buttons>

[thegust]

<ion-navbar hideBackButton *navbar>
  <ion-buttons start>
    <button>
      <ion-icon light name="ios-home-outline"></ion-icon>
    </button>
  </ion-buttons>

  <ion-title> Home </ion-title>

  <ion-buttons end>
    <button>
      <ion-icon light name="ios-search-outline"></ion-icon>
    </button>
    <button menuToggle>
      <ion-icon light name="ios-menu-outline"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

The code above breaks the navbar when the menuToggle is inserted in one of the buttons from <ion-buttons>. It only happens when there are two or more buttons in the <ion-buttons>

Solution found:

.bar-button-menutoggle {
     display: inline;
}

This fix the bug. Don't know if it's the better way to do that.

[jgw96]

Hello! Thanks for opening an issue with us! Would you mind making a plunker or codepen that gives an example of this issue?

[brandyscarney]

Hey @gustavobatista901, buttons with the menuToggle directive shouldn't be placed in the ion-buttons element. This is something we should probably document better, but this is how it should be written:

<ion-navbar hideBackButton *navbar>
  <ion-buttons start>
    <button>
      <ion-icon name="ios-home-outline"></ion-icon>
    </button>
  </ion-buttons>

  <ion-title> Home </ion-title>

  <ion-buttons end>
    <button>
      <ion-icon name="ios-search-outline"></ion-icon>
    </button>
  </ion-buttons>
  <button menuToggle end>
    <ion-icon name="ios-menu-outline"></ion-icon>
  </button>
</ion-navbar>

[brandyscarney]

I created an issue to improve the documentation for this: https://github.com/driftyco/ionic-site/issues/590

[thegust]

Thanks @brandyscarney

[menakachamith]

@brandyscarney can you please give an example code for, two menuToggle buttons on opposite sides in the same navbar ?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.