Sub Header not showing on Android with Tabs

ionic-v1
21

I have the same problem also. In iOS everything looks fine. But in android ionic moves the tabs to the top which hide the sub-header.

The CSS workaround solves the problem. I personally chose to replace the sub-header with a div that sits at the top of ion-content, it looks fine unless you have “pull to refresh”… it pulls down the div also and it doesn’t look nice.

I also think this is a problem in ionic and should be fixed.

22

Here’s how we resolved it with some SASS/CSS.

This allows us to use the standard header-bar, sub-header, and ion-tabs without adding an “special” or “custom” classes.

(Keep in mind that 60px is not the default sub-header height - I believe the default is 44px, but in our case the sub-headers are a little taller).

$height-ion-header-bar: 44px;
$height-ion-tabs: 49px;
$height-ion-sub-header-bar: 60px;

ion-header-bar.bar-subheader {
  height: $height-ion-sub-header-bar;
}

ion-content.has-subheader {
  top: $height-ion-header-bar + $height-ion-sub-header-bar;
}

.platform-android ion-tabs ion-header-bar.bar-subheader {
  top: $height-ion-header-bar + $height-ion-tabs;
}

.platform-android ion-tabs ion-content.has-subheader {
  top: $height-ion-header-bar + $height-ion-sub-header-bar + $height-ion-tabs;
}
1 Like
23

It has been 9 months and this is a key component of the Ionic functionality.

Is this going to be fixed within Ionic, soon?

2 Likes
24

We’re also stuck on this… it seems like I should just be able to have a tab bar then my view should be able to do something like:

<ion-view view-title="whatever">
     <ion-header-bar class="bar bar-subheader">
          <span>Some kind of magic header... probably some kind of button bar to toggle views</span>
     </ion-header>
     <ion-content class="has-subheader">
          <span>super duper content<span>
     </ion-content>
</ion-view>

As others have observed, it works fine on iOS, but Android moves the tab bar to the top and covers up the ion-header-bar… what’s interesting is the space for the header bar is properly inserted between the tab bar and the content… but the ion-header-bar is still stuck under the tab bar.

Having to tweak the css to account for this fairly typical scenario seems to defeat the glory of the ionic framework some…

All that to say, I agree with @lupo1 – is this recognized as an issue and is it going to be fixed?

Thx!

25

Ionic 2 Alpha is out. Maybe this will be addressed in v2?

26

The solution to this depends on your starter. If you use the tabs starter, this won’t work because a lot of cases your tabs html is outside (a parent) of your view HTML. There’s no way in CSS to target a parent selector. You have to add a class when you are on a tab with a subheader. Here’s a simple enough fix.

CSS:
.tabs-top.subheader > .tabs { top: 90px; }

JS:

angular.module('myApp').run(function ($rootScope, $state, $log) {
    $rootScope.$on('$stateChangeSuccess', function () {
    $log.log($state.current.name);
    var tabs = angular.element(document.querySelector(".tabs-top"));
   //Important!!!! Put the state name you want this script to run on.  
   if ($state.current.name == "tab.chats") {
       tabs.addClass('subheader');
    }
    else {
        tabs.removeClass('subheader');
    }
  });
});

You’ll either have to switch tabs or restart your ionic serve to get this to work.

27

simply remove .has-header class from ion-content. that should work

28

The best solution. I extended this code a little bit.

.platform-android .bar-custom {
   top: 93px;
   border-bottom-width: 1px;
   border-bottom-style: solid;
 }
30

hope it will work for you

body ng-app=“starter” ng-controller="profileCtrl"
div class="bar bar-header"
h1 class=“title”>Header</h1
/div
div class="bar bar-subheader"
h2 class=“title”>Sub Header</h2
/div
ion-content class=“has-header has-subheader”
/ion-content
/body

31

Thank you :slight_smile:
I was trying to place the above the and not inside it so the title of tab was missing.

32

This didn’t quite work for me. The content moved down to make room for the subheader, but the subheader remained hidden. I looked with the Chrome console, and the subheader does not have the “.has-tabs-top” class assigned to it. So I changed the css to:

.platform-android .bar-subheader {
top:93px !important;
}
and it works OK