I have a page with various Ionic Items and menu tab at the bottom of the page.
As the Ionic items increase it seems that it overlaps the tab menu bar as shown in the image.
I can scroll page, but i would like to be able to limit the scrolling till the tab bar.
Can someone advice me on how i can set it so that from the top till tab bar everything is scrollable?
It is overlapping due to z-index try to give 1 number higher value to your tab menu like if any element in your code has highest z-index value of 5 than give tab menu z-index value as 6 .
If you want to scroll till tab menu and show upto last icon than add a margin-top/margin-bottom to the height of bottom menu .
Place the tab menu inside <ion-footer> element
It should look like this:
<ion-header>
...
</ion-header>
<ion-content>
...all your elements go here
</ion-content>
<ion-footer>
...tab menu goes here
</ion-footer>