Footer covering a section of main view

ionic-v1
1

I used this: http://codepen.io/anon/pen/begHr 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
2

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.

3

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

4

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:
http://ionicframework.com/docs/api/directive/ionContent/

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)?

5

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

http://ionicframework.com/docs/api/directive/ionFooterBar/

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

6

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.

7

Hi

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: http://codepen.io/anon/pen/nJAum

Would love to know where I went wrong.

Thanks!
-Dan

8

.has-footer{
bottom: 50px;
}

adjust the bottom as required from css.you may see the result

9

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.