0
Not a bug

HTML5 and Bootstrap Dropdown Menu Layering Issue

Alex 4 weeks ago • updated 2 weeks ago 5

Hi, all.


I have a sample published here:

https://rtgstorecentus01.blob.core.windows.net/content/sandbox/bootstrap-4-menu.html


The page uses the Bootstrap toolkit. If you click on the dropdown menu in the menubar, you'll notice that it falls behind the avatar. It doesn't do this with the Flash version. Is it possible to alter the layering somehow so that the SitePal player is lower on the z-axis?


The above sample uses the current version of Bootstrap 4.0, which technically is still in beta. This issue also appears in the most recent production version of Bootstrap, version 3.3.7:

https://rtgstorecentus01.blob.core.windows.net/content/sandbox/bootstrap-337-menu.html


Thanks much!

--Alex.  :-)



Answer

Answer

Alex - 

We've assigned "z-index: 9999;" to our SitePal player so that it would not be hidden behind other HTML elements. 

You should be able to resolve by assigning a larger z-index to the dropdown.

We've verified this will work in your case - please see the following screenshots - 

   http://prntscr.com/hcwqgk  

   http://prntscr.com/hcwpxm

Hope this helps.

Best

Gil

GOOD, I'M SATISFIED

Quick and accurate response. Much appreciated, Gil!

Satisfaction mark by Alex 2 weeks ago
Under review

Alex - we'll look into it and advise.

Best,

Gil

Answer

Alex - 

We've assigned "z-index: 9999;" to our SitePal player so that it would not be hidden behind other HTML elements. 

You should be able to resolve by assigning a larger z-index to the dropdown.

We've verified this will work in your case - please see the following screenshots - 

   http://prntscr.com/hcwqgk  

   http://prntscr.com/hcwpxm

Hope this helps.

Best

Gil

Perfect - Thanks, Gil!


For those of you reading this after the fact, you can find corrected versions here:

You'll note that you'll probably want to alter the z-index for .tooltip, too, as done in the embedded stylesheet for the two files linked above.


Thanks again!