bug: Long dynamic header titles are cutoff

[DavidFrahm]

Type: bug

Platform: ios 7 webview

In multiple Ionic apps where I need to set the view title dynamically, I use this markup:

<ion-view>
    <ion-nav-title ng-bind="category.name"></ion-nav-title>
    <ion-content>
    ...snip...

That works great until it encounters a view title that too long to fit in the bar (easier to test on smaller devices like iPhone 4/5). With a long value, it displays just like one character and the ellipsis.

I fix it by adding this to my scss:

// Longer ion header titles intermittently have crazy large right values on iOS
.platform-ios,
.platform-browser {
  .title.title-center.header-item {
    right: 26px !important;
  }
}

This seems like it might just be an issue with the Angular lifecycle of things, and might not be a clean fix on the Ionic side. (Similar to the issue of why view-title="{{category.name}}" has issues.)

[mhartington]

Codepen demo please

[DavidFrahm]

http://codepen.io/davidfrahm/pen/vNPoVa

Make the viewport really small, reload the page, then click the button to navigate to the view with long/broken title

[adamhughes86]

Any news on this?

Same issue as #945 which was reopened. No feedback on that one either

[zanemcca]

+1

[leizard]

+1. I met the same problem

[thanhnh-infinity]

+1 . Yes, this issue has no longer fixed completely for long time

[Louis-P]

+1

[dilignt]

+1

[jgw96]

thanks @DavidFrahm for the codepen! We are definitely gonna have to take a look at this. It looks like the title is overflowing way too early, is that the issue you all are describing?