Ionic subheader bar overlapping content - html

Question

In a view with header and subheader, subheader content overlaps the contents of the view.
Header in slide menu
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-hide="$exposeAside.active"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
Subheader in a view
<ion-header-bar align-title="center" class="bar bar-subheader custom bar-energized" ng-if="datos.subTitulo">
<div class="buttons">
<a class="ion-chevron-left" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"></a>
</div>
<h2 class="subtitle">{{datos.subTitulo}}</h2>
<div class="buttons">
<a class="ion-chevron-right" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"></a>
</div>
</ion-header-bar>
Div buttons in subheader overlapping content, h2 show 100%.
Something is missing in this code? Thanks
[EDIT]
Rewrote the code to suit my needs: subheader smaller than the header with two links in the corners and a title.
<ion-header-bar align-title="center" class="bar-subheader subheader_custom bar-energized">
<div class="button button-clear">
<a class="icon ion-ios-arrow-back blanco" href="#/app/ranking/ubicacion/{{datos.divAnt}}" ng-if="datos.divAnt"></a>
</div>
<div class="h2 title title_custom">{{datos.subTitulo}}</div>
<div class="button button-clear">
<a class="icon ion-ios-arrow-forward blanco" href="#/app/ranking/ubicacion/{{datos.divSig}}" ng-if="datos.divSig"></a>
</div>
</ion-header-bar>
Add this css:
.has-subheader {
top: 70px;
}
.bar-subheader.subheader_custom {
display: block;
height: 26px;
top: 44px;
}
.title.title_custom {
font-size: 16px;
font-weight: 300;
height: 20px;
left: 0;
line-height: 20px;
margin: 2px 10px 2px 10px;
min-width: 24px;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
text-overflow: ellipsis;
top: 0;
white-space: nowrap;
z-index: 0;
}
Even buttons are not in line with the subheader title. Any ideas?
New status:

Answer 1

Make sure that the content view knows it needs to leave space for the subheaders by adding the CSS class has-subheader:
<ion-content class="has-header has-subheader">
</ion-content>
See http://ionicframework.com/docs/components/#subheader

Answer 2

If you face this issue in Android, then use the following
.platform-android .bar-subheader {
top: 93px;
}
https://forum.ionicframework.com/t/sub-header-not-showing-on-android-with-tabs/15341/18

Answer 3

You can easily change the height of the subheader, footer, and subfooter if you are using SASS with Ionic. If you want a 70px tall subheader simply add $bar-subheader-height: 70px; to your ionic.app.scss file. Your scss file should look something similar to:
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;
$bar-subheader-height: 70px;
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
Check out the www/lib/ionic/scss/_variables.scss file for some of the other things you can change easily.
Here are instructions for setting up sass with ionic and here is a quick tutorial.

Answer 4

You can add has-header or has-subheader class to your main content in ion-content directive.
Here's my code:
<ion-view view-title="View Title">
<ion-content>
<div class="bar bar-header">
<h2 class="title">Sub Header</h2>
</div>
<div class="list has-header">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios-telephone-outline"></i>
</a>
</div>
</ion-content>
</ion-view>
<div class="list has-header"> I add the has-header class to my list to avoid subheader overlapping