Sub Header not showing on Android with Tabs

Alright, I’ll go from there

Hmm, not seeing this locally.

2 Likes

@mhartington
All we did is :- we added your following code to the style.css file
.platform-android .bar-subheader.has-tabs-top{
top:93px !important;
}

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

nothing else. And the subheader moved down.
Please let us know are we supposed to do something else also?

Hmm, try removing the !important?
Other than that, I can’t know for sure with out looking at some code.

If you want, feel free to PM me and I could take a look at things.

Hi,

I am new to Ionic and I have the same problem, plus I’m using SASS instead of the style.css
[EDIT] : adding the two snippets to .scss didn’t help (nothing changed).

Someone who can help?

Thanks a lot,
Stefano

There is still problem with subheader under tabs in android. Any new results?

I’m still seeing this problem as well. Ionic v1.0 boilerplate tabs starter project with bar-subheader added. Looks fine on IOS but subheader gets hidden behind (top-positioned) tabs on Android. Any pointers? I can “fix” this by pushing the tabs to the bottom of the screen (IOS-style) but I’d really rather not.

(Turns out if I push the tabs to the bottom of the screen on Android I run into another Ionic 1.0.0 bug: the soft keyboard doesn’t hide the tabs when it slides up, it just pushes them up, severely limiting the input view. I’ve seen this mentioned other places on the forum)

Hi guys,
I found another trick to solve this problem.
What I did is add a extra class in .bar-subheader (lets say .bar-custom) then just added this following CSS in style.css file.

.platform-android .bar-custom{
   top: 93px;
 }

And that’s solved my problem.

3 Likes

Same problem here… none of the suggested solutions seem to work.

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.

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

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

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!

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

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.

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

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

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

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

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

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