jquery - 有没有办法让ul拉伸(stretch)出模态

Question

所以我有一个用 ul/li 完成的组合框，当你点击一个 anchor 时它会打开。我的问题是它是模态对话框 (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/

Answer 1

@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