Ionic: Subheader is not displayed in tabs-based ap

Question

I am struggling to add subheader into tabs based Ionic application. The problem is that the subheader is not shown in Android, but it is shown in iOS.

I want to use subheader for a search bar, so that it is not scrolled away with content bellow it.

Steps to reproduce the issue:

1. Create a test app based on tabs project:

ionic start subheader-test tabs

2. Modify .\subheader-test\www\templates\tab-dash.html to add subheader on Status tab so that it looks like the file bellow:

<ion-view view-title="Dashboard">

  <ion-header-bar class="bar-subheader bar-balanced">
    <h1 class="title">Subheader</h1>
  </ion-header-bar>

  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
    <p>
      ....
    </p>
  </ion-content>
</ion-view>

3. Start Ionic lab:

ionic serve -l

I tested ion-content with combinations of has-subheader and has-header classed but it was to no avail.

Subheader is not show in Android version of the app in any browser I tested (Chrome, Firefox, IE 11).

Answer 1

This may solve the problem:

www/css/style.css

.platform-android .bar-subheader.has-tabs-top{
  top:93px !important;
}

.platform-android .has-subheader.has-tabs-top{
  top:137px;
}

Or maybe you can add $ionicConfigProvider.tabs.position('bottom'); in app.js like this:

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom');
     //
    }

Answer 2

It didn't quite work for me. I had to delete the "has-tabs-top" class from the subheader CSS to get it to work (looking in the Chrome console, that class was not assigned to the subheader when running ionic serve --lab)