Popover does not show

ionic-v1
1

Hi all,

First of all, really liking this framework and having fun codding with it.

But I am having an odd issue with popovers. I really can’t get my head around it and it is probably stupid.

Why this codepen does not work: http://codepen.io/anon/pen/dHqsL ?

On clicking the menu on top I can see the backdrop appearing and the proover-view appearing, but the style elemnts (height, top, width, opacity) are not appearing. I can’t understand why.

Am I missing something?

I don’t get why this works…

$ionicPopover.fromTemplateUrl('templates/item-popover.html', {
    scope: $scope,
  }).then(function(popover) {
    $scope.popover = popover;
  });

Do we have to create the popover on create of the page ? What if I want to create them dynamically ?

Thanks,

Ari

1 Like
2

Just updated the codepen so it is working now: http://codepen.io/anon/pen/IDdqJ

I think the main problem you were having is that “popover.show()” requires you to pass in “$event” as a parameter so that it knows which element to align itself with.

1 Like
3

Wow, thought I tried that…
Is it better to recreate it on the fly and only when needed or having one preloaded (it will be for actions in a list)
Thanks!

4

I guess it’s really up to you and what you prefer. Preloading will be somewhat more efficient, but I don’t think it would be a noticeable difference. However, if you do decide to preload you will have to be careful not to cause memory leaks (by not calling “remove”) - so keep that in mind :smile:

5

Another thing to check… The popup will draw offscreen if you’re previewing in Chrome with the Developer Tools panel open at the bottom. This caused me a lot of headaches!