Content cropped by subheader

ionic-v1
1

Hi,

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
</ion-content>

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.

2

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: http://codepen.io/anon/pen/VYMgvM

3

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 ?

4

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.

5

Iā€™ve started from your codepen : I forgot to surround my page with

<ion-view></ion-view>

And now it works like a charm without dirty css.

Thanks to enlighten me

1 Like