Navigation Bar is hiding / overlapping the tab content


#1

Hi,

I am trying to use ion-tabs along with the ion-nav-bar. The top content of the tabs, however, is being overlapped by the navigation bar. I tried to add has-header at various places, but it doesn’t seem to help.

Plnkr Code: http://embed.plnkr.co/xFOS19z2RRHbTtP9SGTs/preview

This is how it looks:


#2

Do you got a solution for this?


#3

Got a solution. Anyone with this issue, try this.

<ion-tab title="tab1" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
  <ion-view>
    <ion-content padding="true">
      <h2>Inline Tab1</h2>
      <p>Hello. I am static content not wrapped with an ion-nav-view.</p>
    </ion-content>
  </ion-view>
</ion-tab>

<ion-tab title="tab2" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
  <ion-view>
    <ion-content padding="true">
      <h2>Inline Tab2</h2>
      <p>Hello. I am static content not wrapped with an ion-nav-view.</p>
    </ion-content>
  </ion-view>
</ion-tab>