Ionic: Header overlaps content when subheader is hidden in tabs-based app in iOS

Question

I have a nav button to show/hide subheader in tabs-based app. Problem is that when the subheader is hidden, header overlaps the content (ion-content) in iOS. Title Welcome to Ionic is hidden bellow the header.

Subheader is hidden and title Welcome to Ionic should be visible in iOS.

Steps to reproduce the issue:

Create a test app based on tabs project:

ionic start subheader-test tabs

Modify .\subheader-test\www\templates\tab-dash.html to add subheader and show/hide button:

    <ion-view view-title="Dashboard">
    
      <ion-nav-buttons  side="right">
        <!-- SEARCH ICON in header bar -->
        <button class="icon ion-search button button-clear"
            ng-click="toggleSubheader();">
        </button>
      </ion-nav-buttons>
    
      <ion-header-bar class="bar-subheader bar-balanced" ng-show="showSubheader">
        <h1 class="title">Subheader</h1>
      </ion-header-bar>
    
      <ion-content class="padding" ng-class="{'has-subheader' : showSubheader}">
        <h2>Welcome to Ionic</h2>
        <p>
        This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>.
        </p>
        <p>
          To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
        </p>
        <p>
    ......
        </p>
      </ion-content>
    </ion-view>

Add toggleSubheader() function into DashCtrl controller in .\subheader-test\www\js\controllers.js:

.controller('DashCtrl', function($scope) {
  $scope.showSubheader = true;

  $scope.toggleSubheader = function() {
    $scope.showSubheader = !$scope.showSubheader;
  };
})

Modify .\subheader-test\www\ css\style.css to fix Subheader is not displayed in tabs-based app in Android:

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

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

Start Ionic lab:

ionic serve -l

Michal Foksa Michal Foksa · Accepted Answer · 2016-06-18T10:50:42

I solved it by css class applicable for iOS only when subheader is hidden.

css:

/* Shift content down when subheader is shown in iOS. */
.platform-ios .has-hidden-subheader{
  top:44px;
}

html:

<ion-content class="padding" ng-class="{
   'has-subheader' : showSubheader ,
   'has-hidden-subheader' : !showSubheader}">

Ionic: Header overlaps content when subheader is hidden in tabs-based app in iOS

1 Answers