ionic:Solution-the page design is overlap(collapse above) the header

Published on:
Last updated:

This post is also available in: 日本語 (Japanese)

This post is about ionic header overlap content, when you are using the Angular.js-based Mobile UI framework "ionic".

1.Add class="has-header"

There is a useful class called class="has-header".

<ion-content class="has-header">
...
</ion-content>

2.Add padding-top

You can determine px of padding-top by any.

<ion-content style="padding-top:50px;">
...
</ion-content>

3.Add has-header="true"

There is also a way to add has-header="true".

<ion-content has-header="true">
...
</ion-content>

No tags for this post.

About
Kuniyoshi Takemoto is the founder of Amelt.net LLC, and editor of this blog(www.amelt.net).Learn more and follow me on LinkedIn.