My Tabs are stacking incorrectly when deployed to a device


#1

My tabs are coming out overlaying each other when I deploy on my device. The problem doesn’t occur in my computer browser. Please see the image below

The HTML is as follows:

<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">


  <!-- Form Tab -->
  <ion-tab title="Forms" icon="icon ion-document" href="#/offline/2/form">
    <ion-nav-view name="form-tab"></ion-nav-view>
  </ion-tab>

  <!-- Scan Tab -->
  <ion-tab title="Scan" icon="icon ion-camera" href="#/offline/3/scan">
    <ion-nav-view name="scan-tab"></ion-nav-view>
  </ion-tab>

  <!-- Sign Tab -->
  <ion-tab title="Sign" icon="icon ion-compose" href="#/offline/3/sign">
    <ion-nav-view name="sign-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

If anyone has any suggestions, please let me know!

Regards,

Chris


#2

Just curious, is this with 1.0 beta? If so, try changing tabs-style and tabs-type to classes.

From

tabs-style="tabs-icon-top" tabs-type="tabs-default"

To

class="tabs-icon-top tabs-default"

#3

I am using v0.9.27. Does that make a difference?
edit: I tried changing to your suggestion anyway but the same result.


#4

Well since moving to 1.0 beta, theres a been a lot of api changes and fixes. Try upgrade to 1.0 and see if your situation is resolved.


#5

Unfortunately that didn’t help either. I’m going to remove it all, start from scratch with the 1.0 docs and see what happens.

It might be work mentioning that I am using the tab in an abstract state:

// setup an abstract state for the tabs directive
  .state('tab', {
    url: '/offline/:id',
    abstract: true,
    templateUrl: 'views/formtab.html'
  })

  //Form details route
  .state('tab.form-detail', {
    url: '/form',
    views: {
      'form-tab': {
        templateUrl: 'views/form.html',
        controller: 'FormCtrl'
      }
    }
  })

  //Scan route
  .state('tab.scan', {
    url: '/scan',
    views: {
      'scan-tab': {
        templateUrl: 'views/scan.html',
        controller: 'ScanCtrl'
      }
    }
  })

  //Sign route
  .state('tab.sign', {
    url: '/sign',
    views: {
      'sign-tab': {
        templateUrl: 'views/sign.html',
        controller: 'SignCtrl'
      }
    }
  })