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
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:
margin-bottom: 20% !important;
border-bottom: none !important;