Skip to content

View title is truncated on some screens #9950

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sryze opened this issue Jan 11, 2017 · 7 comments
Closed

View title is truncated on some screens #9950

sryze opened this issue Jan 11, 2017 · 7 comments

Comments

@sryze
Copy link

sryze commented Jan 11, 2017

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

screen shot 2017-01-11 at 15 37 57
screen shot 2017-01-11 at 15 38 17

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

screen shot 2017-01-11 at 15 58 40

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
Copy link
Author

sryze commented Jan 12, 2017

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
Copy link
Author

sryze commented Jan 12, 2017

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
Copy link
Author

sryze commented Jan 12, 2017

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

@wbhob
Copy link

wbhob commented Jan 12, 2017

Close?

@sryze
Copy link
Author

sryze commented Jan 13, 2017

@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
Copy link
Contributor

jgw96 commented Jan 13, 2017

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

@jgw96 jgw96 closed this as completed Jan 13, 2017
@ionitron-bot
Copy link

ionitron-bot bot commented Sep 5, 2018

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 5, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants