Ion-content overlaps with ion-header

Following is my configuration.

Ionic:

   Ionic CLI                     : 6.6.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.0
   @capacitor/core : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/Users/kishorpawar/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v12.12.0 (/usr/local/Cellar/node/12.12.0/bin/node)
   npm               : 6.11.3
   OS                : macOS Catalina
   Xcode             : Xcode 11.4.1 Build version 11E503a

this doc says as below

image

But still, my ion-content overlaps with ion-header .

I am trying this usage example with ion-virtual-scroll. I tried fullscreen, padding and other solutions on the forum including old ionic versions.

I have the following code in my app.component.html.

<ion-app>
    <ion-header [translucent]="true">
      <ion-toolbar>
        <ion-title size="medium">
          <ion-img [src]="header_logo" height="150" width='150'></ion-img>
        </ion-title>
      </ion-toolbar>
    </ion-header>

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

and the ion-content is present in every component.

Hey there! So this isn’t actually how you should be structuring your DOM.

ion-header is not meant to be a “global” component in this case. It should be included in all your pages.
This is probably why you’re having issues.

Hey, thanks a lot man for responding!

Okay I got your point. Can you please help me with reference on how to structure the DOM for multipage app. Is there a concept of DOM inheritance? or We just create a component for global/common DOM and use it in every component?

So each page should follow this pattern

<ion-header>...</ion-header>
<ion-content></ion-content>

<!-- optional -->
<ion-footer>...</ion-footer>

Really these are the basic page building blocks.
DOM inheritance is not really a thing here.

So info on why: This is how we organize animations between pages.
Having each page have their own header allows each page to have it’s own animation for when the page leave or enters the dom.

I understand. But that is redundant work, for a complex app which is the usual case.

Anyway, I get the gist of it.

thanks again for your response.

You are right, it is working after I moved ion-header to page.

1 Like

Good Job Sir. Thanks For sharing the own ideas.

1 Like