search

IfnotFr / PopConfirm

A simple action confirmation plugin for jQuery based on Twitter Bootstrap Popover
MIT License
99 stars 35 forks source link

PopConfirm popovers don't show above a <div> where overflow:hidden #4

Closed bhall7 closed 10 years ago

bhall7 commented 10 years ago

When a regular Bootstrap popover is called from a button inside a <div> where the CSS has been set to overflow:hidden;, it properly displays the entire popover above the <div> from inside which it was called (http://www.bootply.com/bhall7x/101614): bootstrap popover happy But, when a PopConfirm popover is called from a button inside a <div> where the CSS has been set to overflow:hidden;, it is not properly shown above the <div> from where it was called: popconfirm popover sad Is there a way to somehow get the PopConfirm popover to display above all other elements, even if the <div> from which it was called is set to overflow:hidden;?

I would have put together an example on Bootply or JSFiddle, but I can't get PopConfirm to work in any of those test environments.

IfnotFr commented 10 years ago

Hum. I need an example for resolving this one.

Please, take a look here :http://jsfiddle.net/RDh7E/2/

It is a well working jsfiddle with popconfirm. The official demo one.

Thanks for your feedback :)

bhall7 commented 10 years ago

I was able to put together a working example on JSFiddle: http://jsfiddle.net/Y4t8a/5/

Hopefully you'll be able to see what's happening more clearly.

Thanks!

IfnotFr commented 10 years ago

I think i have a fix, i will release it when i have the time :)

bhall7 commented 10 years ago

Awesome, Thanks! Looking forward to an update, and we certainly appreciate your work on this awesome plug-in.

bhall7 commented 10 years ago

See also http://stackoverflow.com/questions/21838918/bootstrap-popconfirm-popovers-dont-show-above-a-div-where-overflowhidden

IfnotFr commented 10 years ago

Maybe it is very simple. but I have not yet found the solution.

Anyway, thank you for your involvement :)

IfnotFr commented 10 years ago

I tried so complicated that it was very simple.

It is a problem from bootstrap popover. So i added a new param "container" for fix this.

Source : http://stackoverflow.com/questions/14633364/make-bootstrap-popover-overlap

bhall7 commented 10 years ago

Ah! Was it really as simple as adding container: 'body'? I just verified that all is working using an updated Fiddle: http://jsfiddle.net/bhall7x/Y4t8a/6/

Also, dude, your avatar and username changed. I didn't recognize you! :-)

Thanks for your work on this!

IfnotFr commented 10 years ago

Yep, they changed the behaviour of popover since BP3 and they added this option for fixing this problem.

(I changed my name to my international nickname. I forgot my name on github was my real name)

No problem :)

bhall7 commented 10 years ago

I just discovered a problem: PopConfirm and Bootstrap modals. Since the container is now set to body, whenever you trigger a PopConfirm popover inside of a modal, it shows up behind the modal (on the body, where it was told to show up), and is invisible to the user. :-)

Is there a way in the JavaScript/jQuery to configure some instances of PopConfirm to use the body as the container and others to not use the body as the container? How would I pass that argument to PopConfirm?

bhall7 commented 10 years ago

I think I figured out. When you need to trigger an instance of PopConfirm from within a Bootstrap modal, simply set container: false (JS Fiddle). Otherwise, the default will be container: body.

IfnotFr commented 10 years ago

Your tests are very interesting !

Yes, I thought there might be problems with placement. Thats why I left the container option customizable in the PopConfirm instanciation.

I will keep this in mind, maybe for a FAQ on this github :)

Thanks a lot !