Ion-nav-back-button text overlapping view title

ionic-v1
1

The app I have created can quite easily have titles and back text too long for the nav-bar. In the past I have in the past created (less than ideal) custom solution. I just upgraded to v1.0.1 and hoped that ionic now natively dealt with this. From a bit of googling I think that it should because I couldn’t be the only person to have this issue. Also every so often I do see the header moving slightly to the right.

image

The code for this image in index.html was very simple.

<ion-nav-bar>
    <ion-nav-back-button></ion-nav-back-button>
<ion-nav-bar>

If anyone tell me if Ionic should be dealing with this by default it would be great. If Ionic doesn’t has anyone else encountered this problem and how did you tackle it?

Thanks,
Dave Synnott

2

As you can see, a text you’re using is simply too long, even if you float view title to the right.

My advice, don’t use textual back buttons. Icon should be enough.

3

The solution I am ideally talking about would be to ellipsis the back button text to avoid this. Not having the text is not an option.

I may just implement a solution myself (adding an ellipsis to the back text string based off title length and screen width). I was just checking that ionic didn’t do it before I put in any significant effort.

4

Ionic should do that by default, who knows why it’s not working in your case. Still this much text is not user-friendly, with or without text-overflow.

5

Thanks for the info will delph into why it isn’t working rather than how I can implement it.

I would have to disagree with you about the user friendliness of it though. I think having “Breat…” (in the above image) as the back text is perfectly fine from a ux/ui point of view and quite useful for the app’s user-base.

6

Then we al least agree to disagree.

7

When the back button title is too long it should change to the word “Back”. See this codepen: http://codepen.io/brandyshea/pen/eNQoMZ?editors=101

Are you overriding the back text using the $ionicConfigProvider? I wasn’t able to reproduce this in a codepen, are you overriding any css?

8

Ahh thanks Brandy. You got me on the right track. Some of my back titles were becoming back, I didn’t know why. I was forcing a reload of the states that were causing the overlapping text using

$state.go(....{reload: true})

I should to be handling those state changes differently know that ionic caches states anyway.

1 Like