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…

Try removing the ion-view tag:-)

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

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

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:

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

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.

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…

[has-header]{ margin-top: 50px; } <ion-content has-header>

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 !imp…

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…

Ion-content is cut off by the ion-header

Ionic Framework ionic-v3

piyukore July 12, 2016, 9:37am 5

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

Topic		Replies	Views
Header + Tabs (top) = cut off top content ionic-v1	4	5805	January 7, 2015
<ion-content> is hiding behind <ion-header> ionic-v3	0	611	March 1, 2018
Headers and footers hiding content?	11	33728	March 1, 2018
Ion-header bar above ion-content not working ionic-v1	1	1141	September 10, 2014
Moving ion-header to different component messes up margins ionic-v3	2	466	December 7, 2016

Ion-content is cut off by the ion-header

Related topics