Content cropped by subheader


I would like to add a subheader to my template. So I write this:

<ion-header-bar align-title="center"> ...</ion-header-bar>
<ion-header-bar class="bar-subheader">... </ion-header-bar>
<ion-content class="has-subheader">
a list

This code works when I refresh my page (on Chrome), But when I navigate on other page and come back to it, the list is cropped by the subheader bar. Same behavior when I deploy on IOS device.

This behaviour is strange and very tedious.

Any advise on this ?

Thanks in advance.

Maybe you could reproduce this in a codepen? By the look of it you are only adding this to one view, so I tried to reproduce it in a codepen but I don’t see an issue with overlapping:

Sorry for my late answer. And thanks for the codepen !

I found a strange behavior on sub-header bar.
Two cases for my Page with header and sub-header:
1- I load this page and ion-content has “has-subheader” class
2- I load this page, go to another page and come back to the subheader page and ion-content has "has-header"class

That’s why it show different thing. But Now I have to find why I get “has-header” and not “has-subheader”.

Does someone already get this behavior ?

Again, if you could reproduce this in a codepen or at least show your code we could be of more help. :slight_smile: I’ve verified in the codepen above the ‘has-subheader’ class stays on the ion-content even after navigating to the other pages and back.

I’ve started from your codepen : I forgot to surround my page with


And now it works like a charm without dirty css.

Thanks to enlighten me

1 Like