Embedding ion-footer-bar in template pages

ionic-v1
1

I have an <ion-footer-bar> in some of my template pages. My main index page has the following:

<ion-nav-bar></ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>

Then in my template pages, I use and specify the footer:

<ion-view>
    <ion-content></ion-content>
</ion-view>

<ion-footer-bar></ion-footer-bar>

This works well and I like it because I can control the footer on a per-page basis. The design of the app I’m developing also calls for this since footers are different between pages.

However, when a user transition betweens pages, you can see the footer slide across the top of the screen. I noticed that if I move <ion-footer-bar> to the index.html page (under <ion-nav-view>), there is no transition/animation issues.

Is it possible to fix the animation issue when <ion-footer-bar> is at the bottom of a template page?

Thanks,

Matt

2

Can you post a codepen or plunker?

3

I was able to fix this by 1) upgrading to the beta release and 2) moving ion-footer-bar to be after </ion-content>. I’m not sure if the upgrade was required, but it works great now.

<ion-view>
    <ion-content></ion-content>
    <ion-footer-bar></ion-footer-bar>
</ion-view>
4

Most likely the upgrade wasn’t needed, just placing the footer inside the ion-view should have taken care of everything.

Glad to hear you got everything resolved

5

Hi there! I have the exact same problem, but in my case the ion-footer-bar inside ion-view doesn’t work. I mean, it works well, but in every page I have the footer bar animated!!

Any idea?

best!
D.

6

Do you have a codepen sample?

7

better:

Thanks a lot for the possible help!

best!!
d.