使JQuery UI对话框自动增长或缩小以适合其内容 [英] Make JQuery UI Dialog automatically grow or shrink to fit its contents
问题描述
我有一个显示表单的JQuery UI对话框弹出窗口.通过选择表单上的某些选项,新选项将出现在表单中,使其变高.这可能导致以下情况:主页具有滚动条,而JQuery UI对话框具有滚动条.对于用户来说,这种双滚动条的场景很难看并且令人困惑.
I have a JQuery UI dialog popup that displays a form. By selecting certain options on the form new options will appear in the form causing it to grow taller. This can lead to a scenario where the main page has a scrollbar and the JQuery UI dialog has a scrollbar. This two-scrollbar scenario is unsightly and confusing for the user.
如何在不显示滚动条的情况下使JQuery UI对话框增长(并可能缩小)以始终适合其内容?我希望主页上只有滚动条可见.
How can I make the JQuery UI dialog grow (and possibly shrink) to always fit its contents without showing a scrollbar? I would prefer that only a scrollbar on the main page is visible.
推荐答案
更新:从jQuery UI 1.8开始,有效的解决方案(如第二条评论所述)将使用:
Update: As of jQuery UI 1.8, the working solution (as mentioned in the second comment) is to use:
width: 'auto'
使用autoResize:true选项.我会说明:
Use the autoResize:true option. I'll illustrate:
<div id="whatup">
<div id="inside">Hi there.</div>
</div>
<script>
$('#whatup').dialog(
"resize", "auto"
);
$('#whatup').dialog();
setTimeout(function() {
$('#inside').append("Hello!<br>");
setTimeout(arguments.callee, 1000);
}, 1000);
</script>
这是一个可行的示例: http://jsbin.com/ubowa
Here's a working example: http://jsbin.com/ubowa
这篇关于使JQuery UI对话框自动增长或缩小以适合其内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!