ionic-content overlaps/hide behind ion-header-bar/ion-nav-bar.


Recently I am working on Ionic Framework with AngularJS. I noticed that my <ion-content> was overlapping or hidden behind <ion-nav-bar> or in some cases you may have <ion-header-bar> as well..

       <ion-header-bar class="bar bar-header bar-dark">
      <h1 class="title">Settings</h1>
      <button class="button button-clear" ng-click="closeSettings()">Close</button>
    </ion-header-bar>
    <ion-content>
      <div class="padding">
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Units</span>

            <ion-radio-buttons ng-model="settings.tempUnits">
              <button class="button button-positive button-radio" ng-value="'f'">&deg;F</button>
              <button class="button button-positive button-radio" ng-value="'c'">&deg;C</button>
            </ion-radio-buttons>
          </label>
        </div>
      </div>
    </ion-content>

Solution: 

Assign a class=”has-header” to ion-content.

<ion-content class="has-header">
</ion-content>

Hope this helps –

Happy Android/ionic/angular Coding 🙂

Advertisements

3 thoughts on “ionic-content overlaps/hide behind ion-header-bar/ion-nav-bar.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s