Multiple Navbar icons on android align vertically instead of horizontally

ionic-v1
1

Createda side bar navigation app and have added multiple icons on navbar (2 icons on left side and 2 icons on right side). On ios the icons look fine and are arranged horizontally. But on Android the icons get aligned vertically. Tried to reduce the font size of the title as well the length of the title, ultimate result was still the same.

Please can you help or guide on how to resolve this issue especially on Android.

using ionic beta version.

2

Do you mind sharing a bit of the html? I can test it on an android device and see what the issue is

3

Thanks mhartington. below is the html code that i am using and post compiling it with cordova and hosted on android shows icons as vertical. but works fine on iOS.

 <script id="event-menu.html" type="text/ng-template">
  <ion-side-menus>

    <ion-side-menu-content >
      <ion-nav-bar id="navBarTitle" class="nav-title-slide-ios7 bar-positive" align-title="center">
        <ion-nav-back-button class="button-icon ion-chevron-left">
        </ion-nav-back-button>
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
          </button>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
           <button class="button button-icon button-clear ion-ios7-star-outline">
           </button>
           <button class="button button-icon button-clear ion-share" ng-click="showActionsheet()">
           </button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
    </ion-side-menu-content> 

    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Left Menu</h1>
      </ion-header-bar>
      <ion-content id="sideBarContent">
        <div id="photos" class="clearfix">
          <div class="photo">
            <div menu-close id="tileButton" class="button button-clear" ng-click="showCameraActionsheet()">
              <img id="sideBarImage" ng-src='img/HRZone-button_idle.png'></img>
            </div>
          </div>
        </div>
        <ul class="list">
          <a menu-close href="#/event/check-in" class="item">Check-in</a>
          <a menu-close href="#/event/attendees" class="item">Attendees</a>
          <a nav-clear menu-close href="#/event/home" class="item">Home</a>
        </ul>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>
</script>
4

I created a project, replaced the 1.0 beta 1 js/css with the nightly builds the replaced the content with yours and got this on android 4.1

Can you try the nightly builds?

5

Thanks mhartington. I will try with the latest nightly build. Will post the outcome.

6

I tried using the nightly build but the response is still the same on Android 4.4.2. I think there is some css issues with ionic and android 4.4.2 which does not cater for multiple icons on nav bar.

7

I’ve also seen this on Android 4.4 - pretty sure this is an issue with whitespace between css inline-blocks. If you remove the whitespace between the button tags or add an html comment block between them it should work. e.g.

<ion-nav-buttons side="right">
       <button class="button button-icon button-clear ion-ios7-star-outline">
       </button><!--
       --><button class="button button-icon button-clear ion-share" ng-click="showActionsheet()">
       </button>
    </ion-nav-buttons>

See this codepen for an example: http://codepen.io/mlev/pen/LwFJz

6 Likes
8

Yep, on 4.4.2 - I had the same issue - followed @mlev 's fix and it works like charm. Thanks @mlev

-ix

9

Thansk mlev. I will try this and let you know. is there anyway we can override the css styles by our own. Will that work.