statusbarPadding not affecting pages navigated to from tabs

[hotforfeature]

Short description of the problem:

Pages pushed on the nav from a tabs page do not have statusbar padding. The class is added to the <ion-navbar>, but the CSS selectors in platform/cordova.ios.scss do not account for an <ion-page> that is a direct child of <tabs-page>. They must be a child of <ion-nav> or <ion-tab>

What behavior are you expecting?

.statusbar-padding should affect pages navigates to from a tabs page.

Steps to reproduce:

1. Add statusbarPadding: true to config object
2. From an <ion-tabs> page, this.nav.push(AnotherPage)

ionicBootstrap(MyApp, [], {
  platforms: {
    statusbarPadding: true
  }
});

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x 2.0.0-beta.10

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 ios-deploy version: 1.8.6 ios-sim version: Not installed OS: Mac OS X El Capitan Node Version: v5.11.0 Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

[hotforfeature]

I was looking at plunker, and I wasn't able to quickly enable the statusbarPadding through the bootstrap config. I'm not sure if it's a version issue, or something with the way the default plunker is set up.

I could spend a couple more hours trying to get plunker to work, but this is just a simple CSS selector fix in #7436. I'm not sure how necessary the effort would be to get this working on plunker's website.

The problem is that when in the context of a page with <ion-tabs>, a NavController push will place the <ion-page> as a direct descendant of the tabs.

<ion-tabs>
  <ion-tab>
    <ion-page>...headers and padding work in this page</ion-page>
  </ion-tab>
  <ion-tab>
    <ion-page>...headers and padding work in this page</ion-page>
  </ion-tab>

  <!-- This is where the ion-page gets added when calling push on NavController for this component -->
  <ion-page>...headers do not have padding since this doesn't match a CSS selector</ion-page>
</ion-tabs>

If <ion-tabs> isn't supposed to be putting the page there, or the concept of navigating to a page from <ion-tabs> is incorrect, then there's an underlying issue that needs to be fixed, and adding a CSS selector is just a bandaid.

[brandyscarney]

Thanks for the issue and PR @hotforfeature! So a page really shouldn't be pushed from the tabs. Are you trying to navigate from a page with tabs to a page without them?

[hotforfeature]

That's correct. From the tabs page we are initiating a wizard-like workflow that steps through several pages of configuration, before being completed and navigating back to the root tabs page. During the wizard, the user should not be able to use the tabs.

I'm not sure if a Modal would serve the correct purpose here, since there are several pages that can be navigated forward and backward (though always in order)

What is the reason that a page shouldn't be pushed from tabs?

[jgw96]

Hello @hotforfeature ! Would you mind using this plunker to build an example of your layout? Don't worry about setting the statusbarPadding, we would just like to see an example of how you are doing your layout with tabs. Thanks!

[hotforfeature]

http://plnkr.co/edit/fF1wkDAgq9LNFekq3Wgw?p=preview

[brandyscarney]

Thanks for the Plunker! You are pushing the pages correctly. I was confused when you said you were pushing from the ion-tabs page. :) This is definitely an issue with Material Design mode and subpages in a tab. We've made some changes to tabs in the latest code but I'll take a look at this soon.

[brandyscarney]

Please see my comment here: https://github.com/driftyco/ionic/pull/7436#issuecomment-236202502

This will be fixed in the beta 11 release. If you'd like to try out the nightly version you can install it using:

npm install --save ionic-anguar@nightly

There have been quite a few changes that will be documented in the changelog but this PR is a good reference for the changes: https://github.com/driftyco/ionic-conference-app/pull/206

Thanks for the issue!

[victor-shelepen]

ДЭХщжжжжжцэз л

On 26 Jul 2016 19:19, "Andrew Mitchell" notifications@github.com wrote:

Short description of the problem:

Pages pushed on the nav from a tabs page do not have statusbar padding. The class is added to the , but the CSS selectors in platform/cordova.ios.scss do not account for an that is a direct child of . They must be a child of or

What behavior are you expecting? .statusbar-padding should affect pages navigates to from a tabs page. _Steps to reproduce:_ 1. Add statusbarPadding: true to config object 2. From an page, this.nav.push(AnotherPage) ionicBootstrap(MyApp, [], { platforms: { statusbarPadding: true } }); _Other information:_ (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) _Which Ionic Version?_ 1.x or 2.x 2.0.0-beta.10 _Run ionic info from terminal/cmd prompt:_ (paste output below) Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 ios-deploy version: 1.8.6 ios-sim version: Not installed OS: Mac OS X El Capitan Node Version: v5.11.0 Xcode version: Xcode 7.3.1 Build version 7D1014 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/driftyco/ionic/issues/7435, or mute the thread https://github.com/notifications/unsubscribe-auth/ABWOj4tMncvyuf0Oxaf2Ur2nxguFGg2iks5qZjN1gaJpZM4JVU-a .