Ion-view title is truncated when it should not be

ionic-v1
1

I am having trouble putting a codepen together to show this issue. Also, having issues getting a screenshot from an actual iPhone5s. It also occurs on Android phones as well. It has been an issue for a few releases. I have a side menu app with the menu content using ion-view title=“blah”. When I use Chrome emulate for iPhone4 or 5 for example, the h1 created looks like the below. Sorry for the crudeness here but it shows up like this:

less-than Back menu-icon Availa…

<h1 class="title ng-binding" ng-bind-html="title" style="left: 116px; right: 116px;">Available Activities</h1>
1 Like
2

Looks like this issue only occurs when clicking on a link that is not in the menu. For example, a playlist from the list of playlists.

I was able to recreate the issue by doing the following:

  1. create a new project using "ionic create testApp sidemenu
  2. change the title in playlist.html to “Available Activities”

The title should not be truncated as it will fit in the space allocated.

Thanks in advance for your help.

3

Looks like regardless if there are right buttons, the title is centered as if there are right buttons. I would prefer it to display as much text as possible if there are no right buttons.

1 Like
4

Opened an issue for this: