Popover fails to render

1

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.

2

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
3

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.

4

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?

5

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

6

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

7

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

2 Likes
8

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

9

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

10

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.

11

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?
tanks

12

Thank you this fixed my issue too