Page navs and overlays with tabs view will overlap with iOS statusbar

[wli]

Short description of the problem:

Page navs and overlays with tabs view will overlap with iOS statusbar. This was fixed for other views (in #6154), but doesn't work with tabs.

What behavior are you expecting?

It should not overlap.

Steps to reproduce:

1. From a tabs page, call nav.push

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
Originally addressed in #6154 via f45ddf9

As you can see, the new selector ion-navbar-section.statusbar-padding > .toolbar does not apply to the page inside the tab, since there is no ion-navbar-section.

Cleanest solution seems to be creating a new rule ion-tab ion-navbar.statusbar-padding.toolbar, but I will leave it up to the ionic team to decide (maybe @brandyscarney can chime in here)

Which Ionic Version? 2.0.0-beta.6

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.8.0
Xcode version: Xcode 7.3 Build version 7D175

[brandyscarney]

Thanks for the issue! I'll look into this soon.

[brandyscarney]

Hmm I am not able to reproduce this in our e2e test (https://github.com/driftyco/ionic/tree/2.0/ionic/components/app/test/cordova) or in the conference app (https://github.com/driftyco/ionic-conference-app/). Is there anything else going on besides navigating to a new page inside of tabs?

Here's a gif of what I see: http://g.recordit.co/BictqlhckJ.gif

[abuechler]

@brandyscarney I noticed the same issue. When I run my app in the simulator, I don't see it, but I get it when running it on iPad 2/ iPhone 5 with Ionic View.

[brandyscarney]

@abuechler Thank you for that info! I was able to reproduce it that way. 😄 I'll have to look into whether this issue is with the framework or the view app itself.

Please let me know if anyone has steps to reproduce it in a simulator or on a device outside of view. Thanks!

[brandyscarney]

Also, @abuechler, as a temporary work around for it not working in view, you could set statusbarPadding: true in the config. This will show the padding when the platform is ios no matter where you view it though (including the browser):

@App({
  templateUrl: 'build/app.html',
  config: {
    platforms: {
      ios: {
        statusbarPadding: true
      }
    }
  }
})

[wli]

@brandyscarney If it helps, I have 'tabSubPages': true set in my app's config block.

[wli]

I'm actually a bit unclear what that does - the documentation is a bit sparse on the subject: http://ionicframework.com/docs/v2/api/config/Config/

[abuechler]

@brandyscarney Ok, that works. Thanks!

[brandyscarney]

@wli The tabSubPages property hides the tabs section on child pages of the tab. Material Design does this by default, but iOS does not. I am able to reproduce the issue now. Thank you! Will look into a fix.

I agree we need to add more documentation behind the config properties. I think this is something we'll fix with this issue: ionic-team/ionic-site#585