Moving ion-header to different component messes up margins

Ionic Framework ionic-v3
1

Hey.

I have a class lain out as such:

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

<ion-menu [content]="menucontent"> ... </ion-menu>

<ion-content #menucontent> .. </ion-content>

Which has been displaying perfectly.

However, when I moved the ion-header into a new component, and instead used that component, my page decided that the new header component should be rendered directly over the content view.

I remember from Ionic 1 that the “has-header” class may be able to solve this issue, but it doesn’t seem to work in Ionic 2.

Is there a standard solution to this problem, other than manually specifying margin-top?

Thanks

2

bump that bump my lump

3

Same problem here. I’ve wrapped my header in a component and the content is now overlapped. The documentation suggests that the header “…needs to be the one of the three root elements of a page” which, I suspect, is the problem. Nesting it in a component seems to break the positioning of the content.