ion-header overlaps the ion-content | Ionic 3

user_4054527 0
Viewed 2878

I have a very simple app so far, but I can't figure out how to fix the overlapping of the content (header on top of the content). I have created a component header that contains the header as the name suggest.

header.html

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            Some Title
        </ion-title>
    </ion-navbar>
</ion-header>

I have been trying to use it on different pages, but it always overlaps the content of the page.

page.html

<app-header></app-header>

<ion-content padding>
    <h1>Some Page</h1>
</ion-content>

I have tried using div tag instead of ion-content, and also tried using class="has-header", but nothing seems to be working. Although, if don't use the header as a component such as the following, it works fine. But I want to use the header as a component so that I can reuse it on other pages.

page.html (don't want to have it like this)

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            Some Title
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <h1>Some Page</h1>
</ion-content>
ionic3 ionic-framework
2 Answers

As pointed out in this thread of Ionic official forum by @brandyshea of Ionic team, the thing is that in one page you can only have 3 kind of tags as top tags, everything else must go inside one of them. The 3 tags are:

<ion-header></ion-header>
<ion-content></ion-content>
<ion-footer></ion-footer>

I was trying to organize my app as @Hafiz and stumbled on the same problem, the solution has been to put my custom header (<ew-navigazione-top>) inside <ion-header> in each page.

<ion-header>
<ew-navigazione-top [ew_title]="navParams.get('label')" [ew_subtitle]="The subtitle"></ew-navigazione-top>
</ion-header>

P.S. This is the solution for Ionic 3. For previous versions on the same linked thread you can find other specific solutions.

user_53669300

try with below : 

<app-header></app-header>
<ion-content style="margin-top:__px">
<h1>Some Page</h1>
</ion-content>
user_96003820
Related