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
Try to give: position:relative; z-index:100
to the parent div of your dropdown list. or provide a fiddle to get better answer.