[v2 beta.11 ios] Modal navbar height is too short

[jasonwaters]

Short description of the problem:

I have the following preferences set in config.xml:

<preference name="StatusBarOverlaysWebView" value="true"/>
<preference name="StatusBarBackgroundColor" value="#00A9A2"/>
<preference name="StatusBarStyle" value="styleDefault"/>
<preference name="fullscreen" value="true"/>

They make it so that the status bar in ios overlays the top navbar a bit for a nice look. But I noticed an inconsistency with the navbar height when viewing a page component that was presented as a modal, and another page component is pushed onto the NavController. See this video:

https://www.dropbox.com/s/1tw46nn86kqk9ql/err.mov?dl=0

What behavior are you expecting?

I was expecting the navbar height to maintain the same height it was in the original modal.

Steps to reproduce:
0. On an iOS device...

1. present a component as a modal using modalcontroller
2. push another component to the navcontroller from within the modal
3. notice the navbar height is reduced.

Which Ionic Version?
Ionic 2.0.0beta.11

[jasonwaters]

Here's what I believe is happening:

1. a modal is created and presented.
2. a button is tapped and a new page is added to the navigation stack via nav.push().
3. the newly added page is not a child of .modal-wrapper, the way the original modal page is. Instead, the new page is added to the DOM immediately after the ion-modal tag.

[jasonwaters]

@jgw96 Any timeline on a fix for this one? It's a pretty glaring issue in my app right now...

[kinglionsoft]

I get the same issue and find the reason is that: platform-ios platform-cordova is not added to the classList of body.
It looks like ionic.Platform.detect() has never run.

[chandanch]

Hello I'm facing this issue in iOS 9.3 but works fine on iOS 8

[ghenry22]

I also have this problem on iOS. Running iOS 9.3, no problem on android.

I did not have this issue with beta10, since upgrading to beta11 it has appeared.

[ghenry22]

this is still present on RC0 on both ios9 and ios10

from within a modal, push any page onto the nav stack and the space for the statusbar is lost.

[manucorporat]

This can be fixed by having a <ion-nav> in the modal.

[ghenry22]

I already have ion-header and ion-navbar on the modal when this issue is occurring. What is ion-nav? Did you mean navbar or is this something else that needs to be put into the header on modals?

[ghenry22]

to be clear the modal itself has the correct header size. It's when you push another page onto the nav stack from within a modal then that pushed page the status bar overlaps the nav bar.

[ghenry22]

@manucorporat - issue is still present in rc1

[manucorporat]

@ghenry22 what I try to explain is that this is not really a bug, but a unfortunate misuse of the API.
It is easy to understand once you know how navigation works in ionic 2.

It is very common for a application to have a root <ion-nav [root]="mainpage"></ion-nav>. This component provides a NavController, it handle the navigation stack.

In beta RC0, modal are not longer attached to the main navigation stack, they are like an Alert. The NavController you are injecting in your modal is not the modal's one.

You are pushing a page to the main navigation stack under the modal.

If you want to have navigation inside your modal, you have to create a new ion-nav, check out this as reference: https://github.com/driftyco/ionic/blob/master/src/components/modal/test/basic/app-module.ts#L342-L531

We are evaluating if modal should provide automatically their own navigation stack, but it is not a trivial change.

[ghenry22]

ah I see what you mean now, I'll have a play around with it and see what I can do. It's an odd one because in some of the beta versions this issue was not present. Obviously it would be nice to just be able to nav.push, nav.pop etc from any page/element in the app regardless of how that page is presented, it would certainly be a simpler user experience, but I also think that just having nice clear documentation about how to use nav within modals could achieve the same thing,

[ghenry22]

@manucorporat thanks for the help!

[jasonwaters]

@ghenry22 thank you for the information. Creating an outer component with <ion-nav> in it does solve my problem. But I can't help but feel that this solution is incredibly short sighted. Eventually most complex apps will want to push additional pages onto the navigation stack from within a modal. Which means they will have to find this workaround and implement it in a creative way, or once per every modal that has sub navigation pages.