Subtitle Sound Field Resistance

Question

In a view with a title and a subtitle, the contents of the subtitle overlap the contents of the view.

• Slide menu title

  <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> 

• Subheading in 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>

The Dvis buttons in the overlapping contents of the sub-header, h2 show 100%. Is there something missing in this code? Thanks

[EDIT] Rewrote the code according to my needs: the title is smaller than the title with two links in the corners and the 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 do not match the subtitle title. Any ideas?

New Status:

Answer 1

Make sure the content view knows that you need to leave space for the subheadings by adding the has-subheader CSS class:

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

See http://ionicframework.com/docs/components/#subheader

Answer 2

If you encounter this problem in Android, 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 subtitle, footer and subfile if you use SASS with Ionic. If you want the subtitle to be 70 pixels high just add $bar-subheader-height: 70px; to ionic.app.scss file. Your scss file should look something like this:

 // 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"; 

Browse the www/lib/ionic/scss/_variables.scss file for some other things that you can easily modify.

Here are instructions for setting up sass with ionic , and here is a quick tutorial .

Answer 4

You can add the has-header or has-subheader to the main content in the ion-content directive.

Here is 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 overlapping subheadings