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


#1

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.
@mhartington
Thanks.


#2

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


#4
< 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…


#5

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?


#6

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?


#7

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>
                </button>
                <div class="buttons buttons-left">
                    <span class="left-buttons">
                        <button class="button button-clear" ng-click="goBack()">Cancel</button>
                    </span>
                </div>
                <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>
                    </span>
                </div>
            </ion-header-bar>
        </div>
        <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>
                </button>
                <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="$root.network.isOffline">
                            <i class="icon ion-compose"></i>
                        </button>
                        <button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()"></button>
                    </span>
                </div>
            </ion-header-bar>
        </div>
    </ion-nav-bar>

    <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-tab>
            <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
                </div>
            </ion-content>
</ion-view>
</ion-nav-view>
</ion-tabs>
</ion-view>


#8

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?


#9

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.


#10

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.


#11

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;
}

Regards,
Alan