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.stack.imgur.com/x8qQv.png

And with Chosen:

https://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 — Richa, Jan 15 '14 at 09:12

score 8 · Answer 1 · answered Jan 15 '14 at 09:19

8

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

answered Jan 15 '14 at 09:19

Richa

4,240
5
33
50

Yes pls provide a fiddle for better understanding. – Anup Jan 15 '14 at 09:21
Unfortunately your decision doesn't work.. Here is fiddle http://jsfiddle.net/yrd3w/2/ – alxv Jan 15 '14 at 10:10
1

I spent days trying to fix it, until I found you! thanks! – tinyCoder Oct 12 '19 at 23:04

score 3 · Accepted Answer · answered Jan 16 '14 at 00:07

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.

score 0 · Answer 3 · answered Jan 15 '14 at 09:17

0

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

answered Jan 15 '14 at 09:17

Marc

139
1
7

Its not working. Here is fiddle jsfiddle.net/yrd3w/2 – alxv Jan 15 '14 at 12:00
I test your example.. I see what is your problem. You can't put it in front because of the different
you use. Try also MODAL or auto re-size the height and width on you perspective
you to see the dropdown.
– Marc Jan 16 '14 at 02:09

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

3 Answers3