Bottom tabs hiding content

I’m using ion-tabs in iOS positioned at the bottom of the page.
I have 4 tabs and each tab has it own list and the issue become very important in such case.

I’ve tried using margin-top for tabs and margin-bottom for the list but that doesn’t give a satisfactory result.
The best solution I came with is some workaround with the margins but the tab had a white line above it, which override photos etc…

any solution for this issue?

Did you try using <ion-footer-bar> directive?

1 Like

Where should i use it?
Currently I’m using ion-tabs in this order:


You need to include whatever you wish as a footer, in that directive.
so in your case try


For some reason the footer-bar directive is hiding my lists content. I’ll keep checking it out.
I’ve also seen suggestions adding some attributes as class=“has footer”, are you familiar with it? I think that a correct css could fix this issue but I’m unable to find what’s missing.

I’ve managed to solve it by using ng-class and $index, detecting when I’m reaching the end of list and telling whats the index of the last item.
I’ve used this 2 lines, 1 for the bottom margin and 1 for removing the bottom divider:

.lastListItem {
  margin-bottom: 20% !important;
  border-bottom: none !important;