Problems pushing page with popover iOS.

[synga]

Resources:
Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

There are 2 problems, actually 1 problem and the second i don't know if it's suposed to be that way:

The first is that after using a popover to push a page into the nav stack it doesn't adds the padding for the statusbar even having the statusbar-padding class present.

This is is a page where i've pushed into the stack from a button on a my home page, without using the popover:

As you can see there's a space from the navbar to the statusbar content.

And here is a image from a page whose i've pushed from the popover:

There's no space and the statusbar overlays the header content.

The second problem is tied to the first one. When doing the same the page pushed from the popover doesn't enters inside the <ion-nav> tag "over" the home page.

Here is when i push the page from my home page:

As you can see there's the 2 page, one after another as it should be.

Here is the shown code after i push a page with the popover:

The page is pushed off the <ion-nav> and <ng-component> page.

When using modal instead of pushing pages they act as exected, at least in the first problem, but it stacks all way down to the next pushed pages, so it's not just one page. This first problem occurs only with iOS and i've tested with iPhone 7 (iOS 10 and 10.3.1), iPad Pro (iOS 10) and iPad 5th generation.

Since i haven't dove deep in popover i don't know if the second problem IS really a problem or it's suposed to behave that way.

Expected behavior:

After dismissing popover and pushing a page the page should be inserted inside <ion-nav> and have the correct default CSS.

Steps to reproduce:

Create a new project and a popover to push a page, i'm pushing it that way:

Related code:

// USING VIEWCTRL DO DISMISS THE POPOVER AND THEN PUSHING THE PAGE
openYourPage() {
  this.viewCtrl.dismiss().then(() => this.navCtrl.push('YourPage'));
}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

    @ionic/cli-utils  : 1.10.0
    ionic (Ionic CLI) : 3.10.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.0.2
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.5.3

System:

    Node : v6.11.1
    npm  : 5.2.0
    OS   : Windows 10

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

[synga]

@kensodemann here it is Ionic Popover Issue

[kensodemann]

Thanks! I will have a look.

[kensodemann]

Hello! I am going to leave this open for now in case it is a bug, especially since your code looks fine to me. Also, I will urge that you ask this question on our forum or on our slack channel. Someone else may have run across this and have a solution.

Thanks for using Ionic!

[HamzaLJ]

@kensodemann @synga I am having the exact same issue.
You may reproduce it by doing the following :
open modal > push to a new page (here you see that no padding is being added)

[ghenry22]

This is a long running issue with nav in modals.

The answer previously has been "push it different" but that isn't a valid answer.

I have pages that I may want to open from a modal or not. If I navigate to them normally all is good. If I navigate to them from a modal using this.nav.push(page), then the padding on the nav bar is lost.

The suggested solution has been to close the modal then use App to get the root navController like this:
this.modal.dismiss()
this.appCtrl.getRootNav().push(page)

But this is only valid if you want to dismiss the original Modal (or pop over or any other overlay). In my case I don't want to dismiss it, I want to show the user some info and allow them to come back to the modal that was open.

I have hacked in some CSS only for iOS in my app to fix the layout:

<ion-navbar *ngIf="globals.isIos" style="height:calc(44px + 20px); min-height:calc(44px + 20px); padding-top:20px;">
<ion-title style="padding-top:14px !important;">{{selectedItem.name}}</ion-title>

Then all looks as it should. Except on the iPhone X which for some reason is special and different to everything else!

Calling this.appCtrl.getRootNav().push(page) from within an overlay pushes the page correctly but it does it behind the overlay. If there was a way to set the Z-Index of the pushed page to ensure it was top of the stack even when pushed from a Modal (or something similar) then that would resolve this issue with no further CSS hackery required.

[abhishek-cgvak]

//from popover.ts page call this function
itemClick(item){
this.viewCltr.dismiss(item);
}
and for navigation use this inside function
presentPopover(ev) {
let popover = this.popoverCtrl.create(PopoverComponent);
popover.present({ ev: ev });

popover.onDidDismiss(popoverData=>{
this.navCtrl.push(popoverData.component); // for navigation
});

}

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#293