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 🙂