Is there a way to put Chosen jQuery Plugin always to front?

Question

I'm trying to use Chosen plugin with some other plugins like jQuery Layout and jqgrid

Without Chosen my select box look like this:

http://i.stack.imgur.com/x8qQv.png

And with Chosen:

http://i.stack.imgur.com/XlSMz.png

it's overlapped by jQuery Layout.

Is there a way to put Chosen always to front?

I played around with different CSS settings of both plugins, but to no avail.. Help please to figure out what to do.

HTML:

<div class="ui-layout-center"></div>
<div class="ui-layout-north">
    <div style="width: 250px; position:relative; z-index:99999">
        <select id="picker" style="width: 250px">
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
            <option value='5'>5</option>
            <option value='6'>6</option>
        </select>
    </div>  
</div>
<div class="ui-layout-south"></div>
<div class="ui-layout-east"></div>
<div class="ui-layout-west"></div>

jQuery:

$('#picker').chosen();
$('body').layout(
    { applyDefaultStyles: true }
);

Link to JSFiddle: Fiddle

Answer 1

A nested div with a z-index will never be higher than an element outside of the parent. This article explains it well. what you could do is move the nested div outside and toggle the visibility when .ui-layout-toggler-north is clicked. See this JSFiddle

$('.ui-layout-toggler-north').click(function(){
    $('#chosen_select').toggleClass('hide');
});

Note: I put a select element in the .ui-layout-north div as a placholder for the actual "chosen select" element.

Answer 2

Try to give: position:relative; z-index:100 to the parent div of your dropdown list. or provide a fiddle to get better answer.

Answer 3

Try this css style.

position: fixed; 
_position: absolute; 
z-index: 99; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
_height: expression(document.body.offsetHeight + "px");

This help you on your problem. ^ ^