使 JQueryUI 对话框自动增大或缩小以适应其内容

我有一个显示窗体的 JQueryUI 对话框。通过选择表单上的某些选项，新的选项将出现在表单中，使其变得更高。这可能导致这样的场景: 主页有一个滚动条，而 JQueryUI 对话框有一个滚动条。这种两个滚动条的场景对用户来说既难看又令人困惑。

如何使 JQueryUI 对话框不显示滚动条而增长(并可能收缩)以始终适合其内容？我希望只能看到主页上的滚动条。

139799 次浏览
小开

答案是将

autoResize:true

属性创建对话框。为了使其正常工作，您不能为对话框设置任何高度。因此，如果在对话框的创建方法中或通过任何样式为其设置以像素为单位的固定高度，autoResize 属性将无法工作。

小开
最佳答案

更新: 对于 jQuery UI 1.8，工作解决方案(如第二条注释中提到的)是使用:

width: 'auto'

使用 autoResize: true 选项:

  <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

小开 
var w = $('#dialogText').text().length;


$("#dialog").dialog('option', 'width', (w * 10));

做我需要它做的调整对话框的宽度。

小开

高度支持自动。

宽度不是！

要进行某种自动获取所显示的 div 的大小，然后设置窗口。

在 C # 代码中。

TheDiv.Style["width"] = "200px";


private void setWindowSize(int width, int height)
{
string widthScript =    "$('.dialogDiv').dialog('option', 'width', "    +   width   +");";
string heightScript =   "$('.dialogDiv').dialog('option', 'height', "   +   height  + ");";


ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
"scriptDOWINDOWSIZE",
"<script type='text/javascript'>"
+ widthScript
+ heightScript +
"</script>", false);
}
小开

我使用了下面的属性，这对我来说很好:

$('#selector').dialog({
minHeight: 'auto'
});
小开

这适用于 jQuery UI v1.10.3

$("selector").dialog({height:'auto', width:'auto'});
小开

如果您需要它在 IE7中工作，则不能使用 没有文档，漏洞百出，没有支持{'width':'auto'}选项。相反，在你的 .dialog()中加入以下内容:

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

.scrollWidth是否包含右侧填充取决于浏览器(Firefox 不同于 Chrome) ，所以你可以在 .scrollWidth上添加一个主观的“足够好”的像素数，或者用你自己的宽度计算函数替换它。

您可能希望在 .dialog()选项中包含 width: 0，因为此方法不会减小宽度，只会增加宽度。

在 IE7，IE8，IE9，IE10，IE11，Firefox 30，Chrome 35和 Opera 22中测试。


提交答案