Correct ionic layout structure

Ionic Framework Ionic React
1

Hi everyone, we just started to develop our project on Ionic and I would like to know how to solve this problem. We’re using Ionic with TailwindCSS for our content, so Ionic will only be used for navigation, routing, transitions and everything related on rendering correctly on every mobile device (handling notch, safe areas and so on).

So here’s how we would like to setup our layout for App.tsx

  <IonApp>
    <IonHeader className="ion-no-border">
      <IonToolbar>
        <CustomHeader />
      </IonToolbar>
    </IonHeader>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path={Path.Home}>
          {({history}) => <Home history={history} /> }
        </Route>
        <Route path={Path.Detail}>
          <Detail />
        </Route>
      </IonRouterOutlet>
      <IonFooter className="ion-no-border">
        <IonToolbar>
          <CustomFooter />
        </IonToolbar>
      </IonFooter>
    </IonReactRouter>
  </IonApp>

Inside CustomHeader and CustomFooter have only custom html+css

Now, every page will have a custom layout wrapped by theIonPage andIonContent like this:

    <IonPage>
      <IonContent >{children}</IonContent>
    </IonPage>

Here’s the list of my problem (and unfortunately I think that I’m just scratching the surface…)

  1. I have to use IonHeader and IonFooter with a IonToolbar to wrap my CustomHeader and CustomFooter because otherwise the app will not respect the device safe area. The problem is that IonToolbar seems to be adding an additional top, bottom, left and right padding on my CustomHeader and CustomFooter. How can I remove that padding?

Screenshot 2021-05-07 at 12.27.33
Screenshot 2021-05-07 at 12.27.33914×386 47.5 KB

  1. All of my custom HTML page content inside the <IonContent> is displayed under the IonHeader and IonFooter. What should I do in order to add the correct padding to the top and bottom of the <IonContent> in order to avoid that?
2
  1. you can utilize ionics built in css utility class: ion-no-padding.
    CSS Utilities - Ionic Documentation
1 Like