jquery UI selectmenu does not go “on top” of all other page elements (uniForm issues)

Question

I am using uniForm (http://sprawsm.com/uni-form/) and jQuery UI select menu (http://jsfiddle.net/fnagel/hsn95/light/).

The problem is, that drop down menu doesn't go "on top" of uniForm elements... so it's really ridiculous looking. I tried changing the z-index of the selectmenu.css, but haven't had any luck....

Any ideas anyone?

I should add that I deleted this from uniForm and have no problems, but i'm afraid there must be a reason it's in there....

z-index:1;

Answer 1

Here's a repost of my answer to the same question you posted on the Uni-Form support forum:

I can't offer any in-depth assistance here, so I will just explain the z-index.

The reason why Uni-Form elements have a z-index property is because of another property, namely position: relative; and the z-index rule is there to ensure that the relatively positioned elements are low enough in the stack so other absolutely positioned elements could go over them, which is ironically the exact problem you are having. This is most likely due to jQuery SelectMenu not explicitely setting the z-index property to it's absolutely positioned elements (which it ideally should).

Removing the z-index property from Uni-Form is absolutely fine in this case, so would be setting an explicit z-index value (anything larger than 1) to jQuery SelectMenu's absolutely positioned element.

Answer 2

I had z-index issues using jQuery dialog and selectmenu.

To solve it I found the z-index of the dialog and set the dropdown part of the selectmenu to it.

I used something like this:

var dialogZindex = $('.ui-dialog').css('z-index');
$('.ui-selectmenu-menu-dropdown').css('z-index', dialogZindex);

Answer 3

You have to change both the z-index and the position to relative on the original select. This will work.

<select style='position:relative;z-index:100'>

Answer 4

I had the same problem with a JQuery UI autocomplete hiding behind a Foundation reveal modal dialog.

The solution I found was a CSS rule:

.ui-front{ z-index:1010; } /*get in front of .reveal-modal z-index:1005*/

Answer 5

In my case it helped to set just the width of the selectmenu.

$( "#myid" ).selectmenu({width:100});

Without this, the dropdown appears behind the dialog.

Answer 6

By my testing, the following recipe works.

$("#selectId").selectmenu("menuWidget").parent().css("z-index", "9999");

Answer 7

I used Remote Debugging on Android with Chrome (https://developer.chrome.com/devtools/docs/remote-debugging) to find the jQuery class of the select menu UI popup (.ui-popup-container) and set its z-index via:

.ui-popup-container {
    z-index: 1000010;
}

My z-index is so large because a 3rd party UI element has a z-index that big that I want to be on top of.

Answer 8

you can fix this by using "appendTo" property of selectmenu. You can pass the id/class of the division you want your select menu to come on top of. This worked for me.