Question

我试图将Chosen插件与jQuery Layout和jqgrid等其他插件一起使用

没有选择我的选择框如下所示：

http://i.stack.imgur.com/x8qQv.png

选择选择：

http://i.stack.imgur.com/XlSMz.png

它与jQuery Layout重叠。

有没有办法让Chosen始终站在前面？

我玩了两个插件的不同CSS设置，但无济于事.. 请帮忙弄清楚要做什么。

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 }
);

链接到JSFiddle：Fiddle

Answer 1

尝试将position:relative; z-index:100提供给下拉列表的父div。或提供一个小提琴来获得更好的答案。

Answer 2

具有z-index的嵌套div永远不会高于父级之外的元素。 This文章解释得很清楚。您可以做的是将嵌套div移到外面，并在单击.ui-layout-toggler-north时切换可见性。见JSFiddle

$('.ui-layout-toggler-north').click(function(){
    $('#chosen_select').toggleClass('hide');
});

注意：我将.ui-layout-north div中的select元素作为实际“selected select”元素的placholder。

Answer 3

尝试这种css风格。

position: fixed; 
_position: absolute; 
z-index: 99; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
_height: expression(document.body.offsetHeight + "px");

这可以帮助您解决问题。 ^ ^

有没有办法将Chosen jQuery插件始终放在前面？

3 个答案: