The top tabs cannot slide out sometimes

[TonyLuo]

This doesn't happen always, but it did happen sometimes.

Tabs:

<ion-view view-title="Test">
  <ion-nav-title>
   Testing
  </ion-nav-title>

  <ion-tabs class="tabs-striped tabs-top  tabs-color-assertive" style="top: auto;">
    <ion-tab title="processing" nav-clear ui-sref="main.my-booking.processing"></ion-tab>
    <ion-tab title="pending4comment" nav-clear ui-sref="main.my-booking.pending4comment"></ion-tab>
    <ion-tab title="all" nav-clear ui-sref="main.my-booking.all"></ion-tab>
  </ion-tabs>

  <ion-nav-view name="bookingContent">

  </ion-nav-view>

</ion-view>

Tab content:

<ion-view view-title=""  hide-back-button="true">

<ion-content scroll-sista class="has-subheader">
    <div class="list">
      <a ui-sref="main.home" class="item item-avatar item-icon-right">
        <img ng-src="common/assets/img//jon-snow.jpg">
        <h2>Jon Snow all</h2>
        <p>Da illest illegitimate</p>
        <i class="icon ion-chatbubble muted"></i>
      </a>
      <a ui-sref="main.shop" class="item item-avatar item-icon-right">
        <img ng-src="common/assets/img//sansa.jpg">

        <h2>Sansa Stark</h2>

        <p>&amp; Joffrey <strike>sitting</strike> sat in a tree</p>
        <i class="icon ion-chatbubble muted"></i>
      </a>
      <a ui-sref="main.shop" class="item item-avatar item-icon-right">
        <img ng-src="common/assets/img//tyrion.jpg">

        <h2>Tyrion Lannister</h2>

        <p>B.A.M.F. imp</p>
        <i class="icon ion-chatbubble muted"></i>
      </a>
      <a ui-sref="main.shop" class="item item-avatar item-icon-right">
        <img ng-src="common/assets/img//jon-snow.jpg">

        <h2>Jon Snow</h2>

        <p>Da illest illegitimate</p>
        <i class="icon ion-chatbubble muted"></i>
      </a>
      <a ui-sref="main.shop" class="item item-avatar item-icon-right">
        <img ng-src="common/assets/img//sansa.jpg">

        <h2>Sansa Stark</h2>

        <p>&amp; Joffrey <strike>sitting</strike> sat in a tree</p>
        <i class="icon ion-chatbubble muted"></i>
      </a>

    </div>

  </ion-content>
  </ion-view>

[djett41]

@TonyLuo This may be happening because you have .has-subheader class on your content, but dont have a subheader. So the top might be off by a little bit. Remove the class and you should be fine

[TonyLuo]

@djett41 I added class="has-tabs-top" instead of has-subheader , now it works! thanks so much!

[djett41]

No prob @TonyLuo , Actually you may not even have to add the has-tabs-top class, I believe the nav view or nav bar directives will already add that class to your content if it detects that you have top tabs. But im not 100% on that

[TonyLuo]

If I don't add has-tabs-top class manually, the tabs bar will over lap the content