Skip to content
This repository was archived by the owner on May 4, 2022. It is now read-only.
This repository was archived by the owner on May 4, 2022. It is now read-only.

View title is truncated on some screens #38

@jgw96

Description

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

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:

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions