Ion-nav-buttons - place 2 icons same side fail on Android


#1

Started from https://github.com/driftyco/ionic-angular-cordova-seed

Add 2 icons on the right side

<ion-view title="Pet Information">

  <ion-nav-buttons side="left">
      <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
      <a class="button button-icon icon ion-alert"></a>
      <a class="button button-icon icon ion-plus-round"></a>
  </ion-nav-buttons>

  <ion-content>

.....

Work fine on Chrome browser,
2nd Icon is misplaced on Android emulator, see image


#2

try

<ion-nav-buttons side="right">
   <button class="button button-icon">
       <i class="icon ion-alert"></i>
   </button>
   <button class="button button-icon">
       <i class="icon ion-plus-round"></i>
   </button>
</ion-nav-buttons>

#3

Same results, work fine on Chrome, misplaced on Android


#4

Which android version?


#5

You need to remove the whitespace between the button tags - see my comment in this topic:


#6

Thanks, Yes this solved the problem.