ionic-framework: bug: Long dynamic header titles are cutoff

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

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 21 (4 by maintainers)

Commits related to this issue

fix(header): ion-nav-title will fill up available space ion-nav-title will fill up available space #4661 — committed to ionic-team/ionic-framework by danbucholtz 8 years ago

Most upvoted comments

Here is my workaround.

//Hack to fix squashed title on iOS
// ionic issue #4661
.platform-ios {
  .title.title-center.header-item {
    left: 49px!important;
    right: 49px!important;
  }
}

.platform-android {
  .title.title-left.header-item {
    right: 68px!important;
  }
}

zanemcca on Apr 13, 2016

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

thanhnh-infinity on Mar 12, 2016