View title is truncated on some screens

[sryze]

Ionic version:
[X] 1.x
[ ] 2.x

I'm submitting a ...
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

ion-view title is cut off on some screens followed by a "..." while on others, where the title is even longer, it's not. This happens 100% of time in my app on Android emulator (Nexus S API 23), but not in browser.

For example, here on the first screen the text "Facilities Booking" is truncated but on the second screen "Maintenance Reporting" is rendered in full length, even though it consists of more characters (18 vs 21):

Expected behavior:

Title should not be truncated in this case.

Steps to reproduce:

Other information:

Title was center using the following method:

.config(function($ionicConfigProvider) {
  $ionicConfigProvider.navBar.alignTitle('center');
})

Chrome inspector says that the title width is set on element (by Ionic code?):

element.style {
    left: 78px;
    right: 78px;
}

Possibly related issues:

#945
#4661

Right now I'm using the following CSS as a workaround:

.bar.bar-header .title {
  left: 50px !important;
  right: 50px !important;
}

Ionic info:

Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Ionic framework version: 1.3.2
Device: Android Marshmallow with a 4 inch screen (Nexus S emulator, API 23)

[sryze]

If this helps, here are some findings after debugging a little further:

Inside updatePositions function, second view (with non-truncated title):

• titleEle.offsetWidth = 0
• titleEle.scrollWidth = 0

For the broken view:

• titleEle.offsetWidth = 144
• titleEle.scrollWidth = 152

So the condition if (titleEle && titleEle.offsetWidth + 10 < titleEle.scrollWidth) { is not satisfied for the broken view.

[sryze]

Sorry, I took above info at wrong point in time, it's actually this:

first:

• titleEle.offsetWidth = 144
• titleEle.scrollWidth = 207

second:

• titleEle.offsetWidth = 144
• titleEle.scrollWidth = 152

[sryze]

I don't get why there is a + 10 in there but removing it fixed my bug.

[wbhob]

Close?

[sryze]

@wbhob Bug is kind of still there, I simply posted a possible fix.

The way I understand that code is: if scroll width is less than 10px away from element's width it's width is never adjusted, however if the element is wide enough it is. This logic seems kind of weird to me. But I don't know much about Ionic's internals and where this 10px margin comes from, maybe the issue lies somewhere else.

[jgw96]

This issue was moved to ionic-team/ionic-v1#38

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