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

ionic-v1
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:

1 Like
6

Thanks, Yes this solved the problem.