使 JQuery UI Dialog 自动增长 HEIGHT 以适应其内容（宽度保持静态）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10417915/
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 HEIGHT to fit its contents (width remains static)
提问by Zack Macomber
Having looked into Make JQuery UI Dialog automatically grow or shrink to fit its contents, I am using the height: "auto"option when building a jQuery modal dialog box:
研究了使 JQuery UI 对话框自动增长或收缩以适应其内容后，我height: "auto"在构建 jQuery 模式对话框时使用了该选项：
$( "#dialog-message" ).dialog({
autoOpen: false,
width: "400",
height: "auto",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
However, the height isn't "growing" to fit all of the contents. I'm still seeing a vertical scrollbar as in this image:
但是，高度并没有“增长”以适应所有内容。我仍然看到一个垂直滚动条，如下图所示：
Is there a way right in the definition code I listed to ensure that the height grows enough so that a vertical scrollbar doesn't show? Or, do I need to do this programmatically before opening the dialog box?
我列出的定义代码中是否有一种方法可以确保高度增长到足以使垂直滚动条不显示？或者，我是否需要在打开对话框之前以编程方式执行此操作？
Edit 1
Not sure why, but Chrome is displaying this fine but IE 8 isn't. I need it to specifically work in IE 8 so I believe I'm just going to put a bottom margin on the text.
编辑 1
不知道为什么，但 Chrome 显示得很好，但 IE 8 不是。我需要它专门在 IE 8 中工作，所以我相信我只是要在文本上放置一个底部边距。
回答by dinesh_malhotra
This all I have done for the dialog box to grow automatically
这就是我为对话框自动增长所做的一切
$("#edit_dependent").dialog({
autoOpen:false,
modal:true,
width:800,
position:["center",20],
minHeight:"auto"
});
回答by Daniel Bidulock
That is very strange... I'm not sure how helpful this will be, but I did manage to get the auto-height to work with the following code:
这很奇怪......我不确定这会有多大帮助，但我确实设法让自动高度与以下代码一起工作：
<html>
<head>
<link href="jqueryUI/css/ui-lightness/jquery-ui-1.8.19.custom.css"
rel="stylesheet" type="text/css">
<script src="jquery-1.7.1.js"></script>
<script src="jqueryUI/js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
width: "400",
height: "auto",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
$("#dialog").dialog('open');
});
</script>
</head>
<body>
<div id="dialog">
1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />
</div>
</body>
</html>
It's basically using the same structure you've already established.
它基本上使用您已经建立的相同结构。
回答by Enfantcool
This is 4 years Late but i have the same problem.
这是 4 年晚了，但我有同样的问题。
Wrote code that fixed it
写了修复它的代码
Put a unique class on your dialog:
在您的对话框中放置一个独特的类：
dialogClass:"someClassName"
$(".someClassName").resize(function () {
var totalHeight = 0;
var children = $(".someClassName").children(); //get all divs inside the dialog
for (var i = 0; i < children.length; i++) {
if ($(children[i]).innerWidth() > 15) {
var childrenHeight = children[i].scrollHeight;
totalHeight += childrenHeight;//make sure your dialog will be the correct height
}
}
$("#idOfContentWithWrongHeight").innerHeight($("#idOfContentWithWrongHeight")[0].scrollHeight);//put the content at the height it should appear
$(".someClassName").height(totalHeight);//update the height of the dialog
});
