Reputation: 115
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
Upvotes: 5
Views: 8818
Reputation: 4736
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.
Upvotes: 3
Reputation: 4270
Try to give: position:relative; z-index:100
to the parent div of your dropdown list. or provide a fiddle to get better answer.
Upvotes: 8
Reputation: 139
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. ^ ^
Upvotes: 0