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:

https://i.sstatic.net/x8qQv.png

And with Chosen:

https://i.sstatic.net/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

Halloo

try to give position:relative; z-index:100 to the parent div of your dropdown list – Delocalize

@Era Post it in Answers, i will definitely Vote Up..! – Currajong

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.

Hymeneal

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.

Delocalize

Yes pls provide a fiddle for better understanding. – Currajong

Unfortunately your decision doesn't work.. Here is fiddle jsfiddle.net/yrd3w/2 – Halloo

I spent days trying to fix it, until I found you! thanks! – Everick

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. ^ ^

Ironmaster

Its not working. Here is fiddle jsfiddle.net/yrd3w/2 – Halloo

I test your example.. I see what is your problem. You can't put it in front because of the different <DIV> you use. Try also MODAL or auto re-size the height and width on you perspective <div> you to see the dropdown. – Ironmaster