Content in IonContent rendering behind IonTabBar

I’m having a problem with content rendering the tab bar at the bottom of the screen. This is a project I’ve picked up from someone else recently, and I’m new to Ionic and React.

My main problem is that stuff which is in <IonContent> is cut off at the bottom of the screen, as it is hidden behind the bottom tab bar.

The tab bar is created in the main App component, which looks something like this.

App.jsx

function App() => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            {/* stuff */}
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            {/* stuff */}
          </IonTabBar>
        </IonTabs>  
      </IonReactRouter>
    </IonApp>
  );
}

And then as an example for what is being done on another page.

ExamplePage.jsx

function ExamplePage(){
  return (
    <AppHeader />
    <IonContent>  
      {/* The rest of the page content goes here */}
    </IonContent>
  );
}

Apologies if the code isn’t completely syntactically correct, but I hope it illustrates what is going on as I think I have included the core parts of each.

The AppHeader works as I would expect, so that the content renders after the header. But this is not the case for the bottom tab bar. I have tried refactoring out the tab bar into a separate component, removing it from App and then inserting that component after </IonContent> on each page. But when I do that, the whole app stops rendering and I just get a blank page.

If anyone could hazard a guess to what’s going on, or point me in the right direction that would be greatly appreciated!

1 post - 1 participant

Read full topic