I have a simple two page navigation.
First page there’s a navbar and content.
On the second page there’s a navbar, toolbar and content:
<ion-navbar>
...
</ion-navbar>
<ion-toolbar>
...
</ion-toolbar>
<ion-content>
...
</ion-content>
On iOS mode, if I navigate back from the second page to the first, the navbar and content both scroll away properly but the toolbar stays on, and then disappears after the first page finishes loading.
I can put the toolbar inside the ion-content, but then it is no longer fixed at the top.
Is there something I’m doing wrong? I can try to create a gif to show exactly what I mean.
I’ve uploaded a gif. See how I’m at the parent page, I navigate to a page with a toolbar, the toolbar appears the moment I click on the button, while the rest of the content animates in.
And when I tap back, everything animates away, except for the toolbar, which just disappears at the end of the animation.
Im seeing the same thing. It seems everything needs to be inside ion-content. But it definitely seems like a big since the documentation advises to put toolbars outside of ion-content. Have you submitted a bug on github?
Not yet, I will though.
Problem is if the toolbar is inside ion-content then it scrolls vertically with everything else in the page instead of staying fixed at the top (or bottom).
Yeah, completely agree with you
This is still a problem in Beta 6 as at 13 May. The workaround of fixing the toolbars contents at the top inside ion-content is pretty tricky due to the navbar being different heights across different platforms. Hopefully this is fixed Ionic team! Did anyone here report this as a bug yet?
One workaround I’m using for the time being is using the <ion-fixed></ion-fixed> tag within the <ion-content> element. Basically, anything you put inside the fixed element, means it won’t scroll with the rest of ion-content. Then i add custom css classes to ion-fixed so that it positions and displays as needed. ion-fixed slides in fine with transitions
Looks like a commit went out today that may fix this, although I cannot test it yet.
@nanexcool pardon my stupid question but how did you create the animated GIF? What tool are you using?
I can’t remember right now, but it may have either
http://recordit.co/
or
https://screentogif.codeplex.com/
Cheers!
