from script_utils.common import common_setup

[AzulYang]

I think script_utils is a folder,but I cannot find where it is.

[DavidFrahm]

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

https://github.com/driftyco/ionic/issues/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]

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.)