# Embedding ion-footer-bar in template pages

**URL:** <https://forum.ionicframework.com/t/embedding-ion-footer-bar-in-template-pages/2282>\
**Category:** ionic-v1\
**Created:** [March 26, 2014, 1:47pm UTC](https://forum.ionicframework.com/t/embedding-ion-footer-bar-in-template-pages/2282 "2014-03-26T13:47:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mraible](https://avatars.discourse-cdn.com/v4/letter/m/f4b2a3/32.png) [@mraible](https://forum.ionicframework.com/u/mraible)\
**Post date:** [March 26, 2014, 1:47pm UTC](https://forum.ionicframework.com/t/embedding-ion-footer-bar-in-template-pages/2282/1 "2014-03-26T13:47:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 26, 2014, 1:55pm UTC](https://forum.ionicframework.com/t/embedding-ion-footer-bar-in-template-pages/2282/2 "2014-03-26T13:55:44Z")

</div>

Can you post a codepen or plunker?

---

<div class="post-metadata">

**Author:** ![mraible](https://avatars.discourse-cdn.com/v4/letter/m/f4b2a3/32.png) [@mraible](https://forum.ionicframework.com/u/mraible)\
**Post date:** [March 27, 2014, 1:03am UTC](https://forum.ionicframework.com/t/embedding-ion-footer-bar-in-template-pages/2282/3 "2014-03-27T01:03:25Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 27, 2014, 12:23pm UTC](https://forum.ionicframework.com/t/embedding-ion-footer-bar-in-template-pages/2282/4 "2014-03-27T12:23:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ds10320](https://avatars.discourse-cdn.com/v4/letter/d/ebca7d/32.png) [@ds10320](https://forum.ionicframework.com/u/ds10320)\
**Post date:** [December 16, 2014, 10:24am UTC](https://forum.ionicframework.com/t/embedding-ion-footer-bar-in-template-pages/2282/5 "2014-12-16T10:24:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [December 16, 2014, 1:41pm UTC](https://forum.ionicframework.com/t/embedding-ion-footer-bar-in-template-pages/2282/6 "2014-12-16T13:41:08Z")

</div>

Do you have a codepen sample?

---

<div class="post-metadata">

**Author:** ![ds10320](https://avatars.discourse-cdn.com/v4/letter/d/ebca7d/32.png) [@ds10320](https://forum.ionicframework.com/u/ds10320)\
**Post date:** [December 16, 2014, 1:56pm UTC](https://forum.ionicframework.com/t/embedding-ion-footer-bar-in-template-pages/2282/7 "2014-12-16T13:56:39Z")

</div>

better:

> **[Dropbox - Error](https://www.dropbox.com/s/lk8is059kd4k9fl/whaam-app.zip?dl=0)**
>
> Dropbox is a free service that lets you bring your photos, docs, and videos anywhere and share them easily. Never email yourself a file again!

Thanks a lot for the possible help!

best!!  
d.