Wednesday, September 28, 2011

Changing the Z-Index of a jQuery UI Selectmenu

I am using jquery.ui.selectmenu on a website that I am building. One of the select controls on a page needs to have its z-index set higher because it is directly above another control that has a non-zero z-index.

The way that jquery.ui.selectmenu is designed is intended to make things really simple: You set the z-index of the original select control, and the rendered select will have the right z-index.

Well it is not quite that simple. jquery.ui.selectmenu uses jQuery’s zIndex() function to get the original select control’s z-index. This function only returns a non-zero z-index if the original select control uses relative or absolute position.

When my select control kept using z-index of 0, I first tried setting it on the ui-selectedmenu, etc. Of course, none worked. So I had to go into the javascript of jquery.ui.selectmenu to see why it was not working, and that was what I found.

So I changed the original select control to uses relative position, and then everything works fine.

No comments:

Post a Comment