Nested states display problem


#1

I have a tabbed app with four tabs, in notification tab, I want to have another inner tab as shown below, however it can’t display the entire content, some content above today header will be covered by the tabs and header.

My notification page:

<ion-view view-title="Notifications">
<ion-tabs class="tabs-striped has-tabs-top tabs-top tabs-background-positive tabs-color-light">

<!-- Dashboard Tab -->
<ion-tab title="Request" ui-sref="tab.noti.req">
<ion-nav-view name="req"></ion-nav-view>
</ion-tab>

<!-- Chats Tab -->
<ion-tab title="Company">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>

<!-- Account Tab -->
<ion-tab title="Holiday">
</ion-tab>
</ion-tabs>
</ion-view>

Request page:

<ion-content has-header="true" has-subheader="true" padding="true">
<div class="list card">
  <div class="item item-divider">Today</div>
  
  </div>
  <div class="list">
  <div class="item item-divider">Today</div>
  <div class="item"> 
      <h2>
      My Shift
      </h2>
      <p>
        08:00 AM - 06:00 PM
      </p>
    </div>
    <div class="item">
    <h2 class=assertive>
    You have not checked in today
    </h2>
  </div>
</div>
</ion-content>

State setting:

.state('tab.noti', {
url: '/noti',
views: {
  'tab-noti': {
    templateUrl: 'templates/tab-noti.html',
    controller: 'NotiCtrl'
  }
}
})

.state('tab.noti.req', {
url: '/req',
views: {
  'req': {
    templateUrl: 'templates/tab-request.html',
    controller: 'RequestCtrl'
  }
}
})