Geek Answers Handbook

Problems with bootstrap popover z-index

I can't get z-index to work on bootstrap popover if it's in a div that has a smooth div scroll on it. I tried to set extremely high values, looked in all css to see if any z-indices were higher than popover, but did not succeed.

JavaScript:

$(".project").smoothDivScroll({ mousewheelScrolling: "allDirections", hotSpotScrolling: false, touchScrolling: true }); $(".block").popover({ html: true, animation: true, placement: 'right' });

Here's what it looks like at the moment: 1 , 2 .

Real-time example: here

+4
source share
4 answers

The clipping you see is probably not related to z-index declarations, but related to the size of your .project div and overflow declaration for the nested div.

 div.scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; }

overflow:hidden; - this is what we create the clips that you see.

+1
source

This is old, but for others, try adding the following attribute:

 data-container="body"
+16
source

I believe this has something to do with your overflow. It seems to be cropping your boxes. If you look at .scrollWrapper in smoothDivScroll.css and change the overflow to visible, you will see a little more of our window. I know that this is not your desired effect, but I think this is the beginning. There must be something with your overflow.

+1
source

@ crazy zergling

I have a popover that automatically appears when the page loads and hides automatically after some timeout (in fact, it is destroyed), this indicates a brief instruction about the navigation bar itself. I also use scrollto.

I tried adding

 data-container="body"

No way, the behavior for mobile phones and depends on this mobile device and its browser.

In Blackberry OS 10, it behaves as expected, a popover is on top of everything and no data container is needed (although it may be useful for other devices)

On samsung / android, the browser does not show popover by default, although also some html5 circles are displayed as squares, therefore it does not look like html5, but the drop-down elements do not appear completely, common scrap. On the same samsung / android, firefox is much better, but there, popover is hidden by the navbar logo. Did not try chrome for android.

I expect this to be his own story for every mobile browser on every specific device.

+1
source

More articles:


All Articles