4

jQuery Layoutやjqgridなどの他のプラグインでChosenプラグインを使用しようとしています

選択されていない場合、私の選択ボックスは次のようになります。

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

4

3 に答える 3

8

与えるようにしてください:position:relative; z-index:100ドロップダウン リストの親 div に。または、より良い答えを得るためにフィドルを提供してください。

于 2014-01-15T09:19:39.673 に答える
2

z-index を持つネストされた div は、親の外側の要素よりも高くなることはありません。この記事はそれをよく説明しています。あなたができることは、ネストされたdivを外側に移動し、.ui-layout-toggler-northクリックしたときに表示を切り替えることです。このJSFiddleを参照してください

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

注:実際の「選択された選択」要素のプレースホルダーとして、選択要素を .ui-layout-north div に配置しました。

于 2014-01-16T00:07:02.500 に答える
1

このCSSスタイルを試してください。

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

これはあなたの問題に役立ちます。^ ^

于 2014-01-15T09:17:42.317 に答える