Ion-content is getting hidden by tabs in bottom, How to fix this issue?

ion-content is getting hidden by tabs in bottom

tabs.page.html

`

<ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
        <ion-icon name="home-outline"></ion-icon>
        <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
        <ion-badge color="danger" class="animated pulse p-1"
                   *ngIf="globalService.itemsInCart"><strong>{{globalService.itemsInCart}}</strong></ion-badge>
        <ion-icon name="cart-outline"></ion-icon>
        <ion-label>Cart</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
        <ion-icon name="list-outline"></ion-icon>
        <ion-label>Orders</ion-label>
    </ion-tab-button>
</ion-tab-bar>
`

the above one generate from the ionic template itself.

and is there in other pages. Please let me know if you need any futher info.

Ok damn i absolutely don’t know what you want from us now :smiley: i can’t see a problem or question here

sorry my bad, how can we fix this issue?

Which issue? I don’t see a problem? Tabs are above the content of course?

How to stop the ion-content to not go below the tabs section?

Can you please start to describe more detailed what u want? Draw a sketch or something else… Your information is horrible. What are you expecting to happen? Should the tabs be at the end of the page and should be visible if scrolled or is the content just to large?

Yes this is the issue do you have any solution for it.

Can you please share a project for people to look at? We cannot guess what is happening here, we need something to inspect. If you can’t share your project, you can always try to recreate the issue in a new project and push that to github.

Hi @mhartington I’ve edited the topic please check.

That doesn’t tell me anything. Please provide a project in the form of Git repo.

1 Like

Just to try to understande the issue, here are some questions:

  • Why would you expect that content shows above tabs?
  • Do you mean when you scroll you want the tab to disappear?
  • Do you want to add some sort of transparency to the tab so you can see that there is content underneath?
  • Are you expecting to see some scrollbar and you don’t see it?