Design error : ion tabs display in android pop on the top below header

the ion tabs showed below the header bar when its supposed to be below.

on android browser
image

on other like iphone
image

Is there anything wrong with ion tabs?
structure:

 <ion-view title="Message">
 <!--header menu-->


 </ion-view>
        <ion-tabs class="tabs-positive tabs-icon-top">
   <ion-tab title="Compose" icon-on="ion-compose" icon-off="ion-compose"> 
  <ion-content   style="margin-top:35px;">
                    <!--content1-->
  </ion-content>
 </ion-tab> 
   </ion-tabs>

I also have got this error.

+1 for solution

You should add the following code in your css file:
.tabs-top > .tabs, .tabs.tabs-top{
top: auto ;
bottom: 0 ;
}

1 Like

Thank you @ksvira
it does work now. It looks beautiful . :smile: