zachfitz/Ionic-Material

Dynamic view title overlaps Back button

Opened this issue · 2 comments

DavidFrahm commented

When using Ionic Material, if there is a view with a dynamic value used for <ion-nav-title> which also displays a Back button without a text label, then the first time that view is accessed the title will overlay the Back button icon.

Sample view code:

index.html

<body ng-app="myMobileApp">
    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>

second-level-view.html

<ion-view>
    <ion-nav-title>{{myViewTitle}}</ion-nav-title>
    <ion-content class="padding">

Screenshot:

image

DavidFrahm commented

I found this Ionic issue where a similar bug had been reported and was resolved for some with ngBind or afterEnter event manipulation.

ionic-team/ionic-framework#2881

In our app I tried the afterEvent which worked but there was a delay. Additionally, you could see it shift a bit on every load of that view, so that seemed like a step backwards.

The simple ngBind did not seem to help, but the explanation of how it helped some in the Ionic issue comments made me think it was a good idea. So even though its pretty much just for good measure, I modified our title...

...from this:

    <ion-nav-title>{{category.name}}</ion-nav-title>

...to this:

    <ion-nav-title ng-bind="category.name"></ion-nav-title>
DavidFrahm commented

I have traced the title/back overlap issue down to an Ionic Material issue on iOS only.

Changing Ionic Material's bar.scss to only left-align the title for android (Ionic default title alignment in iOS is 'center', per Apple HIG) like this resolves the issue:

.bar.bar-header .button + .title {
    .platform-android & {
        text-align: left;
        left: 35px;
    }
    line-height: $base-bar-height;
}

Trying to come up with a solution that does not involve overwriting Ionic Material's scss, I added these .bar related styles in our app's ionic.app.scss to this:

.bar {
  .platform-ios & {
    .bar.bar-header .button + .title {
      // Left alignment from IM bar.scss has issue with title overlaying Back button in iOS
      text-align: center;
      left: 0;
    }
  }
}

This is working in browser, lab iOS, and iOS simulator.

So it would be nice if Ionic Material would include this parent selector to leave iOS titles left aligned.

(Personally, I don't think fixing it as centered is an option, since some apps use labels with the Back button, so a left aligned title that close to a Back button can be confusing what you are going 'back' to.)