Ionic header bar title for android 4.4 (galaxy note 4)


Hi all,
really need some help with my ion header bar. As you see the title is not vertically centered as the toggle-menu icon and the ion-refresh icon. I’m using a samsung note 4 device with android 4.4 kitkat. I’ve also tried running my app on other devices like nexus 5 and galaxy s5 (both with kitkat) and the title was perfectly centered as it should be. Can somebody tell me if there’s a way to fix this? I really don’t want to fix it with css (top 50% for example) because i really don’t want to touch ionic’s css classes.

Can you please provide some code or maybe even a simplified demo?

< ion-header-bar class="bar-stable bar bar-header disable-user-behavior" align-title="left">
< button ng-click="$ionicGoBack($event)" class="button back-button hide buttons  button-clear header-item" style="">
< i class="icon ion-android-arrow-back">< /i> 
      < span class="back-text" style="">
< /span>
< /button>
< div class="buttons buttons-left header-item" style="">
< span class="left-buttons">
        < button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </ button>
      </ span>
< /div>
< div class="title title-left header-item" style="left: 36px; right: 36px;">DASHBOARD< /div>< div class="buttons buttons-right header-item" style="">< span class="right-buttons">
< button class="button button-icon button-clear ion-android-refresh" ng-if="!showButtonBack" ng-hide="hideButtons" ng-click="spinIt(); sharedMethods.doRefresh('zoomIn');" ng-class="classSpinIt" style="">
        < /button>
      < /span>
< /div>
< /ion-header-bar>

This is the code that I took using chrome://inspect i couldn’t make a demo…

I can confirm that this still happens on my Nexus 5 running an app with Ionic lib 1.2.4.

Any ideas why it happens?

Hmm, I haven’t seen this with my tests in 1.2.4.

Would you be able to share some markup?
Are there any custom css going on?

It works fine on iOS and when developing in Chrome, but seems to be a little weird on Android.

The title is just not quite vertically aligned.

Here’s a quick copy of the markup which I’ve taken from the app running in the browser:

<ion-view class="pane" nav-view="active" style="transform: translate3d(0%, 0px, 0px);">
    <ion-nav-bar class="bar-positive nav-bar-container" animation="slide-left-right" nav-bar-transition="android" nav-bar-direction="forward" nav-swipe="">
        <ion-nav-back-button class="hide"></ion-nav-back-button>
        <div class="nav-bar-block" nav-bar="active">
            <ion-header-bar class="bar-positive bar bar-header has-tabs-top" align-title="left">
                <button class="button back-button hide buttons button-icon ion-ios-arrow-back header-item" ng-click="$ionicGoBack()">
                    <span class="back-text"></span>
                <div class="buttons buttons-left">
                    <span class="left-buttons">
                        <button class="button button-clear" ng-click="goBack()">Cancel</button>
                <div class="title title-left header-item" style="left: 74px; right: 128px;">EP-23</div>
                <div class="buttons buttons-right">
                    <span class="right-buttons">
                        <button class="button button-clear ng-binding">Answered: 0/9</button>
        <div class="nav-bar-block" nav-bar="cached">
            <ion-header-bar class="bar-positive bar bar-header has-tabs-top" align-title="left">
                <button class="button back-button buttons button-icon ion-ios-arrow-back header-item" ng-click="$ionicGoBack()" style="opacity: 0;"><span class="back-text" style="opacity: 0;"></span>
                <div class="buttons buttons-left" style="opacity: 0;"></div>
                <div class="title title-left header-item" style="left: 33px; right: 112px; opacity: 0;">Users</div>
                <div class="buttons buttons-right" style="opacity: 0;">
                    <span class="right-buttons">
                        <button class="button button-icon new-subject-nav-btn" ng-click="openModal()" ng-hide="$">
                            <i class="icon ion-compose"></i>
                        <button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()"></button>

    <ion-tabs class="tabs-icon-top tabs-positive tabs-top tabs-striped tabs-item-hide" ng-class="{'tabs-item-hide': shouldHide()}">
        <div class="tab-nav tabs">
            <ion-tab icon="ion-ios-home" href="#/menu/tabs/dashboard"></ion-tab>

            <ion-tab icon="ion-stats-bars" href="#/menu/tabs/a"></ion-tab>

            <ion-tab icon="ion-ios-person" href="#/menu/tabs/b" title="B"></ion-tab>

            <ion-tab icon="ion-ios-information" href="#/menu/tabs/c"></ion-tab>

            <ion-tab icon="ion-more" ng-click="toggleSideMenu()">
            <ion-nav-buttons side="left" class="hide"></ion-nav-buttons>
            <ion-nav-buttons side="right" class="hide"></ion-nav-buttons>

            <ion-content delegate-handle="assessment-scroll" class="scroll-content ionic-scroll overflow-scroll  has-header">
                <div class="scroll">
                    CONTENT HERE


So that compile out isn’t really going to help here. I have no way of debugging this.

Would I see this if I ran ionic start tmp blank and loaded it on my nexus5?

Yeah, wasn’t sure if that would help much ha.

I haven’t actually tried it with bare minimum but I would assume so. I don’t think I’ve done anything out of the ordinary.

The only perhaps ‘not standard’ thing I have done is use nested abstract states which contain the side menu and tabs markup, which then contains my views.

Is there any solution for this problem, on my Samsung with Android 5.0.1 everything is working fine and on Nexus 5 with Android 6.0.1 title text is a little bit above middle.

Is it possible that you still didn’t fix this in latest Ionic version???

I am using:

  • “ionic”: “driftyco/ionic-bower#1.3.1”
  • “cordova-cli”: “6.2.0”

Please help, this is realy eyesore.

Hi all,

I managed to fix it with this code for both platforms:

.platform-android .bar .title {
   display: flex;
   flex-direction: column;
   justify-content: center;
.platform-ios .bar .title {
    display: table-cell;
    vertical-align: middle;