CODEWITHSUNDEEP
javascriptcssionic-framework
Michal Foksa
Michal Foksa

Reputation: 12024

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

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.

Welcome to Ionic is hidden bellow header in iOS when subheader is hidden.

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

When subheader is shown, content is displayed correctly.

Steps to reproduce the issue:

  1. Create a test app based on tabs project:

ionic start subheader-test tabs

  1. 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>

  1. 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;
  };
})

  2. 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;
}

  3. Start Ionic lab:

ionic serve -l

Upvotes: 0

Views: 969

Answers (1)

Michal Foksa
Michal Foksa

Reputation: 12024

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}">

Upvotes: 0

Related Questions