1

だから私は、アンカーをクリックすると開くul/liでコンボボックスを作成しました。私の問題は、それがモーダル ダイアログ (jquery-ui) の一部であり、ダイアログ自体には 2 ～ 3 個の要素しかないため、かなり小さいことです。私のコンボボックスには約12個の要素があります（実際には可変です）ので、実際にはモーダルウィンドウ自体よりも大きくなります。

今、コンボボックスを開くと、ダイアログにスクロールが追加されます。要素がダイアログからいくらか伸びる方法はありますか?

または、このダイアログをもう少し直感的にする方法についての提案はありますか? :)

html は次のとおりです。

<div id="select">
<a id="combo">combo</a>
<div id="combul_div">
<ul id="comboul">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>
</div>
</div>
<a id="click">Click</a>

これが私が使用するjsです

$('#click').click(function () {
$('#select').dialog({ 
    modal: true,
    resizable: false,
    position: 'center'
 });
});

$('#combo').click(function() {
    $('#comboul').toggle();   
})

私が使用しているcssは次のとおりです。

#select {
 display: none;
}
#combo {
    width: 100px;
}
#comboul_div{
    width: 100px;
}
#comboul {
    display: none;
    position: absolute;
    width: 100px;
    border: 1px solid grey;
}

これは、トリミングされたバージョンの jsfiddle です: http://jsfiddle.net/cspHy/7/

4

1 に答える 1

0

@biziclop は適切なソリューションを提供してくれました。

ここに答えを入れるだけで、

CSS

.ui-dialog, .ui-dialog .ui-dialog-content {
    overflow: visible !important;
}

#select {
 display: none;
}
#combo {
    width: 100px;
}
#comboul_div{
    width: 100px;
}
#comboul {
    display: none;
    position:absolute;
    width: 100px;
    border: 1px solid grey;
}

#comboul絶対に配置することができますまたは作ることができますfloat :left

于 2013-09-30T02:11:40.680 に答える