Footer covering a section of main view

I used this: from Ionic Codepen.
After added footer to main view and set has-footer=“true”, I tried to load more data by on-infinite-scroll, then a section of content has been overlayed by footer, like this:

This made the infinite scroll loading image can not show on screen.
Can someone tell me how to fix this task? Thank you. Sorry for my bad English!

1 Like

I just forked it and added has-footer="true" and all seems fine:

You added has-footer="true" in the wrong place. It’s in your movie.html template NOT in then index.html template.

@Calendee Opps, my mistake, it’s worked now, thank you so so much :smile:

Do you know if the has-footer directive is supported with sideMenus? I ask because I have added it to all of my views, and still I have content hidden behind the footer.

Actually, it doesn’t look like the has-footer directive is supported anymore:

So how can I have a footer, that doesn’t hide any of the scrollable content in the main content area (specifically the content at the end of that list - which I cannot seem to get to display above the footer - its’ hidden behind it)?

Since the beta, the Ionic code automatically detects the presence of footers. Make sure you are using the correct syntax.

If that doesn’t help, you’ll need to post a CodePen sample for us to take a look at it.

That was it! Ack, I was still using <div class="footer" ... instead of <ion-footer-bar ... !

Thank you for pointing that out. Exactly what I needed to know.


I’m experiencing the same thing. Using Beta 4 and the ion-footer-bar directive.

I do use ui-router instead of the AngularJS Router and I occasionally need to hide the footer contents depending on the state (hence the ng-If).

Here’s a codepen:

Would love to know where I went wrong.


bottom: 50px;

adjust the bottom as required from may see the result

I need to do some validation before adding my footer. It appears that the automatic addition of “has-footer” doesn’t work with the “ng-if”. It does work with ng-show.

Just leaving this for posterity.