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

Ionic Framework
1

ion-content is getting hidden by tabs in bottom

Screenshot 2020-12-14 at 1.21.43 PM
Screenshot 2020-12-14 at 1.21.43 PM806×318 30 KB

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.

1 Like
2

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

3

sorry my bad, how can we fix this issue?

4

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

5

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

1 Like
6

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?

7

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

8

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.

9

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

10

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

1 Like
11

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?
12

I know this is an old post, but I am facing the same issue and I think it is pretty clear what the issue is based on the OP. When you scroll to the bottom of the page, the tab bar is on top of the content and you cannot scroll any further, therefore the content is being hidden by the tab bar. You can clearly see in the image the button is being cutoff by the tab bar and my assumption is that you cannot scroll down more to see the whole button.

I am facing the same issue trying to create a semi-transparent tab bar:

ion-tabs {
    ion-tab-bar {
        margin-bottom: env(safe-area-inset-bottom);
        position: absolute;
        bottom: 0;
        width: 100%;     
        border-top: 1px solid var(--ion-alt-bg);   
        backdrop-filter: blur(3px);
        --background: rgba(34, 36, 40, 0.925);
        ion-tab-button {
            --background: transparent;
            --color: var(--ion-color-medium);
           // --color-selected: var(--ion-color-dark);
            ion-icon {
                font-size: 1.5rem;
            }
        }
    }
}

I have a block button at the bottom of my page and I cannot see the button because it is behind the tab bar. If this was ever resolved, please share your solution.