ion-content overlaps with ion-header when in ion-router-outlet

Issue

i am using the latest version of ionic4(rc0) and i am trying to create my <ion-header> in the app.component.ts in root.

<ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>
          <img src="assets/atippr_logo.svg" class="atippr-header"/>
        </ion-title>

      </ion-toolbar>
    </ion-header>

    <ion-menu side="start">

      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-item ion-item menuClose="start" href="/dashboard">
            <ion-icon name="apps" item-left></ion-icon>
            Dashboard
          </ion-item>
        </ion-list>
      </ion-content>

    </ion-menu>

    <ion-router-outlet main></ion-router-outlet>
</ion-app>

and later i want to set my <ion-content> in my routed page.

<ion-content>
  Login
</ion-content>

but now the content of my page always overlaps with the header from app.component.ts when i remember correctly in ionic3 there was a tag addition hasHeader="true" but without effect.

anybody can help me out?

Solution

Don't know if it still relevant but I had the same issue and found this structure to solve it:

<ion-app>
  <ion-header>
    <ion-toolbar>    
      <ion-title>Header</ion-title>
    </ion-toolbar>     
  </ion-header>
  <ion-content >
   <ion-router-outlet >
   </ion-router-outlet>
  </ion-content>
  <ion-footer>
    <ion-toolbar>
      <ion-title>Footer</ion-title>
    </ion-toolbar>
  </ion-footer>
</ion-app>

Also don't forget to open a new (with/without padding) in you components html

Answered By - swforlife