Ionic-framework: ionic2 bug(popover) - popover is incorrectly placed the first time is opened.

[zakton5]

Short description of the problem:

When presenting a popover _without_ an event, the popover should display in the center of the screen. The first time the popover is opened, the top of the popover is at the center of the screen. In other words, the popover is shifted down too much.

What behavior are you expecting?

When the popover is opened, I expect the middle of the popover to be in the center of the screen

This is caused by the initial height of the popover being 0, which I assume is because the view has not been initialized yet. The code below shows the problem

class PopoverTransition extends Transition {
  constructor(opts: TransitionOptions) {
    super(opts);
  }

  mdPositionView(nativeEle: HTMLElement, ev: any) {
    let originY = 'top';
    let originX = 'left';

    let popoverWrapperEle = <HTMLElement>nativeEle.querySelector('.popover-wrapper');

    // Popover content width and height
    let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-content');
    let popoverDim = popoverEle.getBoundingClientRect(); 
    let popoverWidth = popoverDim.width;
    let popoverHeight = popoverDim.height; <-- THIS IS 0 (Line 254)
    ...
}

Which Ionic Version? 2.x

[brandyscarney]

Is there any way you could recreate this in a plunker? I have tried adding a popover to a plain page and a page inside tabs and I am unable to reproduce this, the popover height is always defined. Thanks!

Here is a plunker you can fork: http://plnkr.co/edit/me3Uk0GKWVRhZWU0usad?p=preview

[zakton5]

So on iOS, the actual problem is that if the popover's contents force its height to be > 200px (200 is the min-height set in css), then it still assumes that the popover height is 200 and therefore doesn't adjust the top offset correctly. Try it in this plunk: http://plnkr.co/edit/mm1Ls3I20fHXksLcnWE8?p=preview. Load it twice and notice the offset difference between both times.

In Android, it behaves as if there is no min-height. This is where the popover height is first perceived as 0 for whatever reason. The incorrect offset is more noticeable here. Here is the android version of the plunk: http://plnkr.co/edit/ddiYm74ghoGtoT2mHgRl?p=preview

[Artfloriani]

@zakton5 Did you find any workaround for this?

[zakton5]

No I did not,  unfortunately. :(

[packowitz]

With my second Popover I had exactly the same issue. With a working first one I was able to find the difference.
Finally the workaround that works for me is to define the template in the .ts file as template: `` and not refer to it with templateUrl: ''

[davesaus]

same problem here.

Thanks to @packowitz for the workaround.

[ashutosh-akss]

Same issue here, popover is displayed in center of screen

[brandyscarney]

This should be fixed as of the rc.0 release with AoT compiling. Please let us know if it is still not working, thanks!

[BenjaminKauer]

Actually, Popovers aren't working at all since I upgraded to RC0. There's no error message. The backdrop is being displayed, but that's it. Same for Models (but without the backdrop).

[brandyscarney]

@BenjaminDieter Could you try running the conference app and see if the modal/popover there works for you? I am not seeing any issues with them.

Popover:
https://github.com/driftyco/ionic-conference-app/tree/master/src/pages/about-popover
https://github.com/driftyco/ionic-conference-app/blob/master/src/pages/about/about.ts#L16-L19

Modal:
https://github.com/driftyco/ionic-conference-app/tree/master/src/pages/schedule-filter
https://github.com/driftyco/ionic-conference-app/blob/master/src/pages/schedule/schedule.ts#L72-L83

[tamerbak]

@brandyscarney I have the same issue with the last version of Ionic framework :

Cordova CLI: 6.3.1 
Ionic Framework Version: 3.4.2
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.2 Build version 8C38

Even in conference app, it does not work..

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.