View title is truncated on some screens

[jgw96]

From @sryze on January 11, 2017 10:19

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:

ionic-team/ionic-framework#945
ionic-team/ionic-framework#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)

Copied from original issue: ionic-team/ionic-framework#9950

[jgw96]

From @sryze on January 12, 2017 5:53

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.

[jgw96]

From @sryze on January 12, 2017 10:12

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

[jgw96]

From @sryze on January 12, 2017 10:44

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

[jgw96]

From @wbhob on January 12, 2017 22:20

Close?

[jgw96]

From @sryze on January 13, 2017 2:36

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

[EmreErdogan]

Hello. I am using ionic 1.3.2 and having the same issue. I encountered 3 different behaviours depending on the title as you see below. I only change the title and here's what I get.

image 1: Title is "Waiting", it is truncated. Previous view's title is "Requests" and it is shown.

image 2: Title is "Waitingx", which has 1 more character compared to "Waiting", but it is not truncated. Previous view's title is "Requests" and it is also shown.

image 3: Title is "Waiting Requests", which consists of two words and it is longer than "Waiting", but it is not truncated. Previous view's title is "Requests", but "Back" is shown instead.

[arnotixe]

I'm on ionic 5.4.16 + capacitor + angular. My title "Fellesverktøy" (missing 2 letters in rendering sidemenu) is static text in the template. Ideas? :)