I’m working on a simple demo app to show what is possible with ionic and to learn it. First I couldn’t figure out how with the side-menu app to replace the header, is that possible? Second to get around that I created a separate HTML file copied from the sidemenu demo index. I figured from the blank app that an ion-pane is required, but my headers and footers are overlapping with the top and bottom of my content.
I’ve tried placing the headers inside and outside of the ion-pane and removing it altogether but I can’t get it to work. Is there a way to keep this from happening? Do I need to add padding? How to I make sure that will look good on multiple devices?
Sample:
<body>
<ion-pane>
<div class="bar bar-header bar-stable">
<h1 class="title">Header (stable)</h1>
</div>
<ion-content>
<!-- several paragraphs from project gutenburt
to check out the scrolling -->
</ion-content>
<div class="bar bar-footer bar-royal">
<button class="button button-clear">Left</button>
<h2 class="title">Footer (royal)</h1>
<button class="button button-clear">Right</button>
</div>
</ion-pane>
</body>
hey please use the ion-header and ion-footer tags for that
They will set correct css-classes to the ion-content 
Like has-header and has-footer to set correct styling for the content.
Greetz.
1 Like
Into code:
<body>
<ion-pane>
<div class="bar bar-header bar-stable">
<h1 class="title">Header (stable)</h1>
</div>
<ion-content class="has-header has-footer">
<!-- several paragraphs from project gutenburt
to check out the scrolling -->
</ion-content>
<div class="bar bar-footer bar-royal">
<button class="button button-clear">Left</button>
<h2 class="title">Footer (royal)</h1>
<button class="button button-clear">Right</button>
</div>
</ion-pane>
</body>
Or:
<body>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Header (stable)</h1>
</ion-header-bar>
<ion-content>
<!-- several paragraphs from project gutenburt
to check out the scrolling -->
</ion-content>
<ion-footer-bar class="bar-royal">
<button class="button button-clear">Left</button>
<h2 class="title">Footer (royal)</h1>
<button class="button button-clear">Right</button>
</ion-footer-bar>
</ion-pane>
</body>
1 Like
Thanks guys, I can’t believe this isn’t in the docs. Following the web quick start and going through the css docs this isn’t mentioned anywhere.
Is the functionality with ion-header and ion-footer new? Using `ionic start myApp sideMenu’, I still need to add the bar-XXX classes to ion-header and ion-footer, and the ‘has-header’ and ‘has-footer’ classes to the ion-content.
Also to note: If you have a sub header, use ‘has-subheader’ instead of ‘has-header’ on the content (do not use both).
Many many many classes and positioning tricks are not really mentioned on the css pages, but it’s like the way ionic is build. Basicaly has-header, has-footer, has-subheader, has-tabs etc is pretty obvious once you get the feel for it. I think it would be unwise to document every single css class as well, because many are rarely useful. Besides, ionic (with the full framework, including javascript) handles a lot through directives already.
You are right though, that it could to be a bit clearer in the docs. @mhartington is it possible to add mentioning of has-header, has-footer and has-subheader to corresponding places in the css docs? Seems really useful for the newer users.
As for the question if ionic adds the classes in newer versions, I’ve looked in my projects and I’ve included the has-header and has-footer classes myself and doesn’t seem to be generated by the directives… Might not even be nice if it did because we couldn’t customize the layout as much and easy as we can now (thinking about conditional classes etc)
So the has-header, has-footer classes are applied automatically by ionic. If it detects that there is an ion-footer or ion-header visible, it will adjust ion-content and apply the right classes.
@iwantwin The main goal is that people use ion-header and ion-footer along with ion-content. This way they don’t need to worry about little classes like that and can just focus more on their app.
I second this, it was on my earlier project which i created in beta 9 though… Doesn’t seem to work for me in beta 12 and 13.
Just noticed looking at the javascript samples and confirming in ionic.bundle.js that it is ion-header-bar and ion-footer-bar, notice the -bar at the end.
Ah, you’re right 
Will update my answer to make this more clear for future readers
I want to do this. I’m adding both the top and bottom of the page tabs. And appears on the screen. This is my tabs.html.
<ion-tabs class="tabs-striped tabs-top tabs-icon-top tabs-color-assertive"> <!--style="background-color:#C82521; border-color:#ff6a00"-->
<ion-tab title="message" icon="ion-email" href="#/tab/message">
<ion-nav-view name="message-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="plane" icon="icon ion-paper-airplane" href="#/tab/share">
<ion-nav-view name="plane-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="card" icon="icon ion-card" href="#/tab/cards">
<ion-nav-view name="cards-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-tabs class="tabs-striped tabs-icon-top tabs-color-assertive">
<ion-tab title="Email" icon="ion-email" href="#/tab/message">
</ion-tab>
</ion-tabs>
But ionic not detect it correctly. When I run the program, the ionic show content like this.
<ion-content class="scroll-content ionic-scroll has-header has-tabs-top">
In this way,the content is staying behind the bottom tab. Not supposed to happen. If implemented automatically by ionic , code should be as follows
<ion-content class="scroll-content ionic-scroll has-header has-tabs-top has-tabs">
How can I fix this content to not stay behind the bottom tabs.
Physics
{{ chapterList.video_name }}
![]()
This is my .html snippets but my contents are still hidden behind
