Bottom tabs hiding content

ionic-v1
1

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?

2

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

1 Like
3

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

<ion-view>
  <ion-nav-title>{{title}}</ion-nav-title>
      <ion-content>
      </ion-content>
      <ion-tabs>
      .
      .
      .
      </ion-tabs>
</ion-view>
4

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

<ion-footer-bar>
<ion-tabs>
...
</ion-tabs>
</ion-footer-bar>
2 Likes
5

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.

6

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;
}