Ionic-framework: 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?

[DavidFrahm]

@jgw96 Yes, that sounds like one way to look at it. Honestly, it's been a long time and I've just become used to it and always use the CSS workaround in all my projects.

[taigeair]

Happens for me too

[johnfakeacc]

+1 any workarounds?

[zanemcca]

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;
  }
}

[johnfakeacc]

Great thanks!

[Bouzmine]

Only problem I find with this workaround is that long titles will overlap the "Back » button. Would there be a way to do like native, to make header title go to the left (screenshot 2).

[zanemcca]

What screenshot? I am having no issue with back button overlap with this solution.

[danbucholtz]

Hello everyone,

This fix will be in the nightly build tonight.

Full disclosure - there are several fixes we could do make with the header, this is a start. If you dynamically add buttons next to this, you may still run into problems. That is a separate issue that we need to fix as well.

Please test and let me know how it goes. The easiest way to test is to download the nightly ionic.bundle.js file and place it in your project's lib/ionic/js directory, and then make sure your html file is importing the file correctly.

If needed, we'll reopen this.

Thanks,
Dan

[magaliegimenes]

Hello,
Thanks for this fix, I waited for it but in my case it does not work. So, I searched for what was happening and I found out that on the method "self.titleTextWidth", if I comment the break inside the "for" loop (js/angular/controller/headerBarController.js, line 1154), it works (As the element retrieved is always the one in my previous page with the current code).
Maybe the cause of the problem is that I always have tabs at the bottom of my page and they are always here after navigation.
Thanks in advance.
Regards
Magalie

[sinedied]

The issue is actually that it use the first element with the nav-bar-title class, but it can be the one hidden (cached) from the previous screen, used for animations. A proper fix is:

      var children = angular.element(element).children();
      for ( var i = 0; i < children.length; i++ ) {
        var child = angular.element(children[i]);
        if ( child.hasClass('nav-bar-title') && !child.hasClass('hide') ) {
          element = children[i];
          break;
        }
      }

Thanks @magaliegimenes for the hint!

[mdanics]

Facing this issue on Ionic 3.9.2 after using the SideMenu starter project

[ionitron-bot[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.