Ion-tabs with tabs-top class on iOS?

Question

I’m creating an app that uses tabs for navigation and set tabs to top with tabs-top. Android works fine but iOS tabs are behind the header, how to solve this ?

tabs.html

<ion-tabs class="tabs-icon-top tabs-top tabs-color-active-positive">

      <!-- Empresas Tab -->
      <ion-tab title="Empresas" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/emp">
        <ion-nav-view name="tab-emp"></ion-nav-view>
      </ion-tab>

      <!-- Servicos Tab -->
      <ion-tab title="Serviços" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/serv">
        <ion-nav-view name="tab-serv"></ion-nav-view>
      </ion-tab>

      <!-- Acessar Tab -->
      <ion-tab title="Acessar" icon-off="ion-ios-world-outline" icon-on="ion-ios-world" href="#/tab/acesso" ng-click="isLogged();">
        <ion-nav-view name="tab-acesso"></ion-nav-view>
      </ion-tab>


      <!-- Anunciantes Tab -->
      <ion-tab title="Anunciar" icon-off="ion-ios-star-outline" icon-on="ion-ios-star" href="#/tab/anuncio">
        <ion-nav-view name="tab-anuncio"></ion-nav-view>
      </ion-tab>

      <!-- Info Tab -->
      <ion-tab title="Informações" icon-off="ion-ios-information-outline" icon-on="ion-ios-information" href="#/tab/info">
        <ion-nav-view name="tab-info"></ion-nav-view>
      </ion-tab>

  </ion-tabs>

Answer 1

As it is only on iphone you can set in css to give a bigger top.

.platform-ios .tabs-top{
    top: 90px !important;
 }

I put 90px, but if it does not get good you can increase. In iphone usually tabs are at the bottom.

Answer 2

Try putting in app.js on . config like this:

.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.platform.ios.tabs.position('top');

In this link you have more info about: $ionicConfigProvider

Answer 3

Use this on q vc qr to get ahead:

z-index : 9999;