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

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