logo标签列表

让JQuery UI对话框自动增加高度以适应其内容（宽度保持静态）

jqueryjquery-ui
14

我已经查看了如何使JQuery UI对话框自动增长或缩小以适应其内容，在构建jQuery模态对话框时，我正在使用height: "auto"选项：

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

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

jQuery Modal Dialog Image

我是否可以在定义代码中使用一种方法，确保高度增长到足够大，以便不显示垂直滚动条？还是说我需要在打开对话框之前通过编程来实现这一点？

编辑1
不确定为什么，但Chrome可以正确显示，但IE 8不能。 我需要它特别在IE 8中工作，因此我想我只需在文本上放置底部边距即可。

4个回答
9

我已尽力实现对话框的自动扩展

$("#edit_dependent").dialog({

  autoOpen:false,

  modal:true,

  width:800,

  position:["center",20],

  minHeight:"auto"

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

基本上就是使用您已经建立的相同结构。

1

这篇文章虽然晚了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
});
0

这是一个示例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);​
嗯 - 那我有什么特别之处呢？我只是在对话框的 div 中有一些常规的未格式化文本。 - Zack Macomber
有些其他的CSS可能会影响到这个。你检查过了吗？ - coder
我已经删除了除UI相关的所有CSS。 - Zack Macomber
不确定为什么对我没用...我可以看到你的演示很好，但是无法弄清楚为什么它不会自动调整大小。当我尝试你的“setTimeout”示例时，只会出现垂直滚动条并增长。实际窗口不会增大。 - Zack Macomber
你能提供你所做的任何链接吗？这将非常有帮助。 - coder
Chrome可以正确显示，但我的PC上的IE8不能。我想我只需要在文本上加一个底部边距或类似的东西... - Zack Macomber
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接