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

alxv picture alxv · Jan 15, 2014 · Viewed 7.8k times · Source

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

richa_pandey picture richa_pandey · Jan 15, 2014

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