beta14: ion-tabs appear above ion-nav-bar on ios when tabs set to top

ionic-v1
1

Hello,

I’m trying to use a ion-tabs on ios set to the top. It works in the browser and android, but on the ios simulator and my iphone 4 (7.0.4) the ion-nav-bar is below the tabs, and both are overlapping the content.

image

See codepen (run on ios simulator to reproduce the issue)

I’ve tried using tabs-top which worked in beta13
I’ve tried using $ionicConfigProvider.tabs.position(‘top’) but both result in the same problem.

Any suggestions would be appreciated!

2

Hey there, I’m seeing this two locally.
I can push a fix for this, but until the next release you can fix it like this.

  1. Make sure your project is setup for sass.
  2. Open www/lib/ionic/scss/_platform.scss
  3. line 36 you should see this.
    .has-tabs-top {
      top: $bar-height + $tabs-height + $ios-statusbar-height;
    }

Change it to

    .has-header.has-tabs-top {
      top: $bar-height + $tabs-height + $ios-statusbar-height;
    }

Then run gulp sass and you should be good to go.

3

Thanks, that fixed it for me.

1 Like