Nav bar title set async

[cdarken]

There seems to be a problem when setting the title attribute of ion-view, if I set it after a promise is resolved the width is wrong. If it's a constant string there is no problem.

[drewrygh]

You're talking about setting it declaratively in the directive right (eg: <ion-nav-view view-title='foo()'>)?

You can use $ionicNavBarDelegate.title('My Title') to set the title any time after the nav bar is initialized.

[cdarken]

No, like this:

<ion-view title="{{ myCtrl.title }}">

If the title is set as a constant at the instantiation of the controller, everything's right. If I set it delayed as in a promise's then() method, it fails. Also, setting it with $ionicNavBarDelegate.setTitle won't work.

[drewrygh]

Ahh I see. Still, I'd think $ionicNavBarDelegate.setTitle would be the most intuitive way to accomplish this. Is there a restriction or a reason you can't use it?

Here's a codepen showing the title being set async.

[cdarken]

The thing is that I do this after pushing another view.
I see that the codepen is using the nightly build. I'm on beta13. Should I move to a nightly build? How stable are they? I'm making an app for a client. Should I expect surprises?

[drewrygh]

You won't need to use the nightly to get this functionality, I was just doing so to give an example. I think I'm getting the function names mixed up, though because it was renamed recently:

beta13 --> use $ionicNavBarDelegate.setTitle
nightly --> use $ionicNavBarDelegate.title

You can toggle the version in the navigation docs as well, to see the differences.

[grimmegutt]

Hi. I have been trying to make sense of this today and I believe there is a bug involved.
I modified the sample code-pen slightly to produce something similar to what I see in my own project :
http://codepen.io/anon/pen/ogXKyE

Look at the HomeTabCtrl. It sets an initial name of the person - which goes into the title as expected - but then it usually fails to update it 100ms later.

If you click a little bit back and forth between home and facts and scientific facts you will see that it sometimes updates the title, but often not.

From what I have seen, there seems to be a difference in behavior for the first view vs. the one that you switch to, regardless if you are using $ionicNavBarDelegate or an angular expression to set the title.

[drewrygh]

You're right, I was thinking this was just to force usage of the navbar api to change the title, but it is in fact a bug. Working on a fix right now, thanks for pointing this out!

[drewrygh]

Hey @grimmegutt - still looking into this, haven't had much time to look deeper into it but it appears that it's related to the viewController initialization process interfering with the attributes being passed. If the timeout or async call is a large number (>500ms), the title change is detected and applied. See this codepen. When changed to <500ms, the change is never applied.

[adamdbradley]

It's best to use the view-title attribute, or <ion-nav-title> directive. With each of the nav bars async sliding in and out, and the many different scenarios of no animation, with animation, multiple nav bars, no nav bars, no title, with title, title width sizing, placing the title in the correct locating depending on the title's width at the time of it's size when the DOM rendered that frame, transition between histories, etc., having complete control DURING an animation will be difficult. There are other ways to update the title, I'd recommend using those.

[cdarken]

@adamdbradley that directive is only in nightly for now, right?

[cdarken]

Testing beta14 and setting my title with:

$ionicNavBarDelegate.title(title);

The title is set before the animation and disappears right after it finishes.
If I use ion-nav-title the size is computed wrong and the title appears truncated.

Edit:
I found the problem, this happens only if I set view-title="", if I remove it it works correctly.

[charleshan]

Removing view-title="" before using $ionicNavBarDelegate.title(title); does not work in v1.0.0-beta.14. However, using <ion-nav-title> directive as @adamdbradley suggested did fix the issue.

Summary:

• There is a bug while using $ionicNavBarDelegate.title(title);
• There is a bug while using view-title="{{title}}"
• <ion-nav-title>{{title}}</ion-nav-title> seems to be working fine

[ram-you]

Hi @OminStyle , you are quite right.

[juanpasolano]

@OminStyle: only <ion-nav-title>{{title}}</ion-nav-title> worked for me too

[jbdemonte]

When using <ion-nav-title>{{title}}</ion-nav-title> I have the same problem described here: #2945

[levinmr]

+1. Same problem as @jbdemonte

ion-nav-title width is calculated incorrectly. I actually see it display correctly for a flash, and then shrink and truncate the title

Edit: It seems to work if I remove ng-bind which makes no sense.

Wrong size title:
<ion-nav-title><span ng-bind='myTitle'></span></ion-nav-title>

Correct size title:
<ion-nav-title><span>{{myTitle}}</span></ion-nav-title>

[olingern]

EDIT: I'm not sure what's up with the lack of line breaks w/ my code. Putting additional breaks in removes the code formatting at the break, but also puts in all of the other line breaks that are supposed to be there.

Context: I just jumped into a project w/ ionic + sass implemented. Not sure if this is a bug isolated to the SASS implementation or not.

There should probably be a SASS variable for $bar-title-width used in this class. If anyone is interested, I can make some PR's to update things.

Here's my ionic HTML:
<ion-nav-title><span>{{EventName}}</span></ion-nav-title>

Here's the problem in my _ionic.scss:
.bar .title { position: absolute; top: 0; right: 0; left: 0; z-index: 0; overflow: hidden; /* Problem if you have no width set */ margin: 0 10px; min-width: 30px; height: 43px; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 500; line-height: 44px; }

Here's an updated version:
.bar .title { position: absolute; top: 0; right: 0; left: 0; z-index: 0; margin: 0 10px; min-width: 30px; width: 80vw; /* Or whatever width you'd like */ height: 43px; text-align: center; /* text-overflow: ellipsis; */ /* this could be good if it's what you want. Use at your discretion */ white-space: nowrap; font-size: 17px; font-weight: 500; line-height: 44px; }

• Overwrite the .bar .title in your custom SASS components
• Edit the ionic framework SASS. .bar .title. I haven't tested this thoroughly yet and it's implications it might have over the app.

Right now, option #1 is easiest for me, but I wouldn't think it's ideal