Ion-content is cut off by the ion-header

Ionic Framework ionic-v3
1

I just upgraded my app to Beta 10. And as per instructions I’ve removed *navbar from the <ion-navbar> and wrapped it in a <ion-header>.

Now the problem is the first item in my ion-content is cut off in the middle by the header.

How do I stop the first item from hiding under the header?

This is my structure,

<ion-header>
 <ion-navbar></ion-navbar>
</ion-header>

<ion-view>
    <ion-content>
     <ion-list>
      <ion-item></ion-item> 
    </ion-list>
</ion-content>
</ion-view>
2

add a class to ion-content with a top margin of 44px - whereever you don’t want it to hide behind … That’s the default navbar height

3

Try removing the ion-view tag:-)

1 Like
4

add a class has-header like
<ion-content class="has-header ">

5

Yea like that …
But I tried removing ion-view tag. It works well and is a better solution

6

Just to add to this, the only elements that should be direct children of a page are:

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

<ion-view> is not an Ionic 2 component, and the has-header class should not be required in Ionic 2. :slight_smile:

4 Likes
7

thanks for info .i didn’t work on ionic2 yet so don’t have idea about that

8

I have the same issue. I wanted to add a background image to the ion-content but the top of the image is rendered below the ion-header. I’m using beta.10.

9

But what if I wan’t a global header for the whole app and if I want to do something like that

<ion-header></ion-header>
<ion-nav></ion-nav>
<ion-footer></ion-footer>

The target is to have a global header with a splitpane under the header with menu and ion-nav

<ion-header>
</ion-header>
<ion-split-pane (ionChange)="ionChange($event)">
  <!--  our side menu  -->
  <ion-menu [content]="content">
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="rootPage" main #content></ion-nav>
</ion-split-pane>
</ion-footer></ion-footer>
10 
[has-header]{
  margin-top: 50px;
}

<ion-content has-header>
11

Hi there.

Best way I found to fix it, is to set the css classes for the elements: ion-header, ion-content and classes .fixed-content and .scroll-content at the app.scss script, as below:

.ion-page > ion-header {
position: relative !important;
}

.ion-page > ion-content {
position: relative !important;
}

.ion-page > ion-content > .fixed-content,
.ion-page > ion-content > .scroll-content {
margin: 0 !important;
}

12

As @brandyshea suggests the problem, with Ionic 3, relies on the tag you use, on each page only 3 tags are allowed as top tags: ion-header, ion-content, ion-footer, at least for me that was the problem. I was trying to put a component that shows the navigation inside all the pages but the content of the pages was partially covered by the header. The solution has been to put something like this on each page

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

and removing the tag from the ew-navigazione-top component template.

1 Like
13

I followed @alocin’s answer and did the following:

On component:

<ion-navbar>
  <ion-title>Title</ion-title>
</ion-navbar>

On Page:

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

I hope it helps someone!