使 JQuery UI Dialog 自动增长或缩小以适应其内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/756325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make JQuery UI Dialog automatically grow or shrink to fit its contents
提问by MikeN
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 对话框弹出窗口。通过选择表单上的某些选项，新选项将出现在表单中，使其变高。这可能会导致主页有滚动条而 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 对话框增长（并可能缩小）以始终适合其内容而不显示滚动条？我希望只有主页上的滚动条可见。
回答by cgp
Update:As of jQuery UI 1.8, the working solution (as mentioned in the second comment) is to use:
更新：从 jQuery UI 1.8 开始，工作解决方案（如第二条评论中所述）是使用：
width: 'auto'
Use the autoResize:true option. I'll illustrate:
使用 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>
Here's a working example: http://jsbin.com/ubowa
这是一个工作示例：http: //jsbin.com/ubowa
回答by MikeN
The answer is to set the
答案是设置
autoResize:true
property when creating the dialog. In order for this to work you cannot set any height for the dialog. So if you set a fixed height in pixels for the dialog in its creator method or via any style the autoResize property will not work.
创建对话框时的属性。为了使其工作，您不能为对话框设置任何高度。因此，如果您在其创建者方法中或通过任何样式为对话框设置了以像素为单位的固定高度，则 autoResize 属性将不起作用。
回答by IlludiumPu36
This works with jQuery UI v1.10.3
这适用于 jQuery UI v1.10.3
$("selector").dialog({height:'auto', width:'auto'});
回答by emolah
I used the following property which works fine for me:
我使用了以下对我来说很好用的属性：
$('#selector').dialog({
minHeight: 'auto'
});
回答by The Demz
Height is supported to auto.
高度支持自动。
Width is not!
宽度不是！
To do some sort of auto get the size of the div you are showing and then set the window with.
要进行某种自动获取您正在显示的 div 的大小，然后设置窗口。
In the C# code..
在 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);
}
回答by Vladimir Kornea
If you need it to work in IE7, you can't use the undocumented, buggy, and unsupported{'width':'auto'}option. Instead, add the following to your .dialog():
如果您需要它在 IE7 中工作，则不能使用未记录、有问题和不受支持的{'width':'auto'}选项。相反，将以下内容添加到您的.dialog():
'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }
Whether .scrollWidthincludes the right-side padding depends on the browser (Firefox differs from Chrome), so you can either add a subjective "good enough" number of pixels to .scrollWidth, or replace it with your own width-calculation function.
是否.scrollWidth包含右侧填充取决于浏览器（Firefox 与 Chrome 不同），因此您可以向 中添加主观的“足够好”的像素数.scrollWidth，或将其替换为您自己的宽度计算函数。
You might want to include width: 0among your .dialog()options, since this method will never decrease the width, only increase it.
您可能希望包括width: 0在您的.dialog()选项中，因为这种方法永远不会减少宽度，只会增加它。
Tested to work in IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35, and Opera 22.
经测试可在 IE7、IE8、IE9、IE10、IE11、Firefox 30、Chrome 35 和 Opera 22 中工作。
回答by user596393
var w = $('#dialogText').text().length;
$("#dialog").dialog('option', 'width', (w * 10));
did what i needed it to do for resizing the width of the dialog.
做了我需要做的事情来调整对话框的宽度。
