0

タブのコンテンツ内にjQuery Chosenドロップダウンを備えたjqWidgetsタブを使用しています

私が抱えている問題は、クリックしてドロップダウンを開くと、divがタブの下部で切り取られることです-ドロップダウンのポップアップがすべてをオーバーレイして完全に表示することを期待しています

動作を再現するには、次の基本的な例を参照してください。

http://jsfiddle.net/mPwWW/

スタイルシートのハッキングを最小限に抑えて、これをどのように修正できますか?

<html>
<div style="width : 500px; height : 180px;">
<div id="tabs">
    <ul>
        <li>Test</li>
    </ul>
    <div>
        <label>Test:</label>
        <select id="target" style="width : 80px"></select>
    </div>  
</div>
</div>
</html>

<script>
$("#tabs").jqxTabs({
        position : 'top',
        animationType : 'fade',
        selectionTracker: true,
        height : '180px'
    });

// the following lines are just for filling the sample dropdown with some values
var html = '';
for (var x = 0; x < 100; x++) {
    html += '<option value="'+x+'">'+x+'</option>';
}
$("#target").html(html);
// apply the chosen library to this dropdown
$("#target").chosen();
</script>

上記のスニペットで document.ready 呼び出しを複製しなかったフィドル コードを参照してください。

4

1 に答える 1

0

問題は、Chosen ドロップダウンが含まれる div コンテナーの高さが設定されていることです。そのため、Chosen がコンテナー div の高さよりもさらに拡張されている場合、それは切り取られます。あなたが試すことができるのは、Chosenドロップダウンに追加することです：

position: absolute

こうすることで、ページの通常の流れから抜け出すことができます。つまり、親コンテナーの高さに制限されません。

于 2013-03-06T19:02:00.210 に答える