使 JQuery UI Dialog 自动增长 HEIGHT 以适应其内容（宽度保持不变）答案

【问题标题】：Make JQuery UI Dialog automatically grow HEIGHT to fit its contents (width remains static)使 JQuery UI Dialog 自动增长 HEIGHT 以适应其内容（宽度保持不变）
【发布时间】：2012-05-12 04:09:34
【问题描述】：

查看了Make JQuery UI Dialog automatically grow or shrink to fit its contents，我在构建jQuery 模式对话框时使用height: "auto" 选项：

$( "#dialog-message" ).dialog({
    autoOpen: false,
    width: "400",
    height: "auto",
    show: "slide",
    modal: true,
    buttons: {
        Ok: function() {
            $( this ).dialog( "close" );
        }
    }
});

但是，高度并没有“增长”以适应所有内容。我仍然看到如图所示的垂直滚动条：

在我列出的定义代码中是否有一种方法可以确保高度增长到足以使垂直滚动条不显示？或者，我是否需要在打开对话框之前以编程方式执行此操作？

编辑 1
不知道为什么，但 Chrome 显示这很好，但 IE 8 不是。我需要它专门在 IE 8 中工作，所以我相信我只是要在文本上放置一个底部边距。

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

这里是示例demo

 $( "#dialog-message" ).dialog({
        modal: true,
        height: "auto",
                buttons: {
                    Ok: function() {
                        $( this ).dialog( "close" );
                    }
                }

            });
            setTimeout(function() {
            $('#inside').append("Hello!<br>");
            setTimeout(arguments.callee, 1000);
  },1000);

【讨论】：

hmmm - 那么我有什么特别之处呢？我只是在对话框的 div 中有一些常规的无格式文本。
其他一些 css 可能会影响这个。你检查过吗？
我已经去掉了除了 UI 的所有其他 CSS
不知道为什么它对我没有好处...我可以看到你的演示工作正常，但无法弄清楚为什么它不会自动调整大小。当我尝试您的“setTimeout”示例时，所发生的只是一个垂直滚动条出现并增长。实际窗口没有增长
你能提供任何链接到你正在做的事情会有所帮助吗？

【解决方案2】：

这很奇怪......我不确定这会有多大帮助，但我确实设法让自动高度与以下代码一起使用：

<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>

它基本上使用你已经建立的相同结构。

【讨论】：

【解决方案3】：

我所做的一切都是为了让对话框自动增长

$("#edit_dependent").dialog({

  autoOpen:false,

  modal:true,

  width:800,

  position:["center",20],

  minHeight:"auto"

});

【讨论】：

【解决方案4】：

这晚了 4 年，但我有同样的问题。

编写修复它的代码

在你的对话框中加入一个独特的类：

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
});

【讨论】：