Popover fails to render

Ive literally copy and pasted code from the popover docs into my controller and have a button call the show() method for a popover. I see a backdrop dim the existing page but the popover fails to render. Examining elements in Chrome, I see that the popover div is there but seems to invisible.

I’ve got an open issue on this : https://github.com/driftyco/ionic/issues/2343

For me, I’ve temporarily fixed it with this:

.popover.active {
    opacity: 1;
1 Like

It is not an issue. How can you open an issue when we are not able to reproduce it?
Yes I agree docs on popover are really bad! But the issue is with docs and not with the code or component.

Code that works but fails to render is a bug in my book. Now it might be a CSS bug but the end result is the same. I can examine my web page and I can see the HTML in the page. I see the backdrop dimming and I can see the popover-open attribute appear, but it renders as if its invisible. FWIW, I rendering this in a project that also has a sidemenu - could that have something to do with it? Did you try to reproduce with a sidemenu project?

I use popovers and I don’t have any problem with it. It renders even with a side menu. If you share your code it will be really helpful to see the problem

Take a look at the github issue posted in the first response. It shows code samples where popups do not work.

Just posted this on the GH issue, but you need to pass $event in the click-handler.


Hey @eno : Mike is right here. The issue was with my code sample. Are you still having the trouble?

I decided not to use the popover - Im now using a modal instead.

There’s another condition will trick the same bug: if you have defined an CSS class name “none” in your own, and let the “display” attribute with value “none”, you will get this headache tricky bug, just like this:

.none {
  display: none;

why? because ionic will automatically add a “none” class in the “ion-popover-view” tag.

I am trayng to use popover and i have anather problem, inside a popover template i’m loading use data with ng-reload. But while template is loading i can’t see data inside it.Is possibile to do that?

Thank you this fixed my issue too