simo94
March 26, 2015, 3:12pm
1
Hi all,@mhartington
Can you please provide some code or maybe even a simplified demo?
simo94
March 26, 2015, 4:28pm
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…
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?
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>
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;
}
Regards,
