The subheader with ngShow directive doesn't shifts scroll Content


On start I have subheader hidden (a.e. ng-show="false")

<div class="bar bar-subheader item-input-inset" ng-show="showSubheader">     
        <button class="button button-block button-balanced" >Set the Value</button> 

However, when I show the subheader, scroll-content has top: 88px; instead 44 * 3 = 132px

See Demo

In this demo, just click on one of list items. You can see that 1st item overlapped with subheader.

I was thinking that $scope.$broadcast('scroll.resize'); might solve your trouble, but it does not. The problem is that you you have 2 subheaders. Ionic doesn’t account for that in the has-subheader="true" setting.

I’ve run out of time to play with it, but I think you need to tell the scroll content that they are 2 headers with CSS

See the beginning of this here :

Gotta go for now.

Thank you, Its strange that sub-header has fixed height 44px.

First time I wanted to use only one sub-header and put there 2-3 rows. But I can’t. and all stuff goes out of bounds.

More then one sub-header - can’t use also.

I think it should be feature request to allow to user to create sub-header and put there everything but not wrapped by 44 pixels.

Thank you,

Feel free to post a feature request. But as Ionic is designed right now, a subheader is a specific and standard UI element. I don’t think its expected to be especially extensible or changed.

While you are addressing the double subheader issue here, it is still not easy to implement a dynamic subheader that can show/hide while shifting the content below it. This subheader can be very useful to show sticky messages at the top of the screen, below the header, which is something i need for my app.

My workaround for this was to Not use for the subheader at least, since this tag overrides any attempt to shift up the content below by always adding the has-subheader class, no matter what you do. it sounds like a watch function in the ionic code.

So, i use

<div class="bar bar-subheader" ng-show="subOn"> subheader message here </div>

While adding an ng-class in the content like this

<ion-content has-header="true" ng-class="{'has-subheader':subOn}" has-tabs="false" padding="true" >

And in my controller, i can simply do

$scope.subOn = false;

and the subheader disappears, and the content below it is shifted up correctly.

I would wish for this to work automatically upon hiding/showing subheader, it will make the UI a lot easier to maintain.
Cheers :smile:

Have you considered implementing something like the shrinking header to accomplish the same thing?

Yes, this one seems good. Actually I have the same like @michel​habib implemented.


I am working on a sub navigation similar to the following:

As shown in the sample, I added icons to each item in the segmented control and wrapped it into <ion-header-bar class="bar-subheader"> </ion-header-bar>. Additionally, I increased the subheader’s height with .bar-subheader { height: 75px !important; }.

In order for <ion-content> not to hide behind the subheader, I edited .has-subheader { top: 119px; }. This appears to be working when serving the app in the browser, however, if I run it in the iOS or android emulator, the content is hidden by the subheader.

Is there any way to work with an increased height on the subheader?

Thanks for your help in advance.


Anyone? Would be really helpful to get a clear direction.
Thanks Stefan

Hi All,

Not sure if it totally applies, but I wound up here and the $scope.$broadcast(‘scroll.resize’) didn’t work - However! using the $ionicScrollDelegate.resize() function worked perfectly.$ionicScrollDelegate/

Hey all,

I was struggling with this problem for a while also, I’ve come up with a css solution that may or may not work for you.


.bar-subheader + .view-container .has-header {
   top: 88px;


<ion-header-bar class="bar" ng-class="{'bar-subheader'}" ng-show="" ng-controller="Controller as vm">