bug: Navbar title mispalced on Android

[petarov]

Type: bug

Platform: android 4.4 browser

Version: v1.0.0-beta.14

Hi,

There seems to be an issue with the title in the navbar on Android devices. This appears when the navbar is hidden and then shown again using the hide-nav-bar attribute of ion-view.

I was not able to create a Codepen demo, because it only happens when I run the app on the device or using ionic server --lab. Therefore, I have created a test repo where this can be simulated.

Steps to reproduce:

1. Run the app using ionic server --lab.
2. Go to Playlists using the side menu
3. Click the Toggle icon to hide the nav bar
4. Click on a item in the list
5. Go back to the Playlists view and press the Toggle icon again to show the nav bar

Result:

The title overlaps the menu icon.

[petarov]

Any movement here?
I'm currently using a nasty hack to overcome this.

  $scope.$on('$ionicView.afterEnter', function(event, state) {
    if (state.stateName === 'app.prevPage1' || state.stateName === 'app.prevPage2') {
      $timeout(function() {
        $ionicNavBarDelegate.align('left');
      }, 650);      
    }
  });

[dgrana]

This is also happening to me, please fix it

[djett41]

Also can confirm the same view title issue on RC2 for Android on both chrome and on ionic-lab.

[petarov]

Works fine in v1.0.0-rc.2-nightly-1184

Thanks!

[salvadorhol]

I had a similar issue and fixed it by applying title class to h1 tags

<ion-nav-title>
    <h1 class="title">Title</h1>
</ion-nav-title>

[daltonpereira]

Hi, I face this issue for a second while switching between tabs. this happens only for the first time.

[mobicraft-am]

hi, i have exaclty the same bug, on the latest 1.3.1 release of ionic. I don't have the pb in the browser and on iOS.
I have found the pb with the remote debug 👍
If i modify the generate ionic code, it's work fine
I have delete "transform: translate3d(-74.625px, 0px, 0px);"
<div class="title title-left header-item" style="left: 50px; right: 114px; transition-duration: 0ms; transform: translate3d(-74.625px, 0px, 0px);">Compte :</div>

@adamdbradley , hi Adam, an idea ? thank's for your help

my code, in my side menu :
<ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content> <ion-nav-bar class="bar-royal"> <ion-nav-back-button></ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name="side-menu"></ion-nav-view> </ion-side-menu-content>

in the others pages :
<ion-view title="Compte :"> <ion-nav-buttons side="right" class="has-header"> <button class="button button-icon icon No Icon" ng-click="update(compteForm.$valid);show()">MODIFIER</button> </ion-nav-buttons>
<ion-view hide-back-button="true" title="à proximité :" cache-view="true" nav-transition="none" id="page1" style="background-color:#FAFAFA;"> <ion-nav-buttons side="right" class="has-header"> <button class="button button-icon icon ion-ios-loop-strong" ng-click="reload()"></button> </ion-nav-buttons>
<ion-view hide-back-button="false" title="{{offer.label}}" id="page2">

[mj6uc]

Same bug in the latest ionic release on a v1 app! Any workarounds, please?

[nickstucko]

Bug still exists in Ionic v1 :-(

This CSS fixed it for me:

.title { transition-duration: 0ms !important; transform: translate3d(0px, 0px, 0px) !important; text-align: center !important; }

Not the most elegant way, but I needed a quick fix, and this works for now!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.