使JQuery UI对话框自动增长或缩小以适合其内容

我有一个显示表单的JQuery UI对话框弹出窗口。通过选择表单上的某些选项，新选项将出现在表单中，使其变高。这可能导致主页具有滚动条，而JQuery UI对话框具有滚动条的情况。对于用户来说，这种双滚动条的方案是难看的并且令人困惑。

如何使JQuery UI对话框增长（并可能缩小）以始终适合其内容，而不显示滚动条？我希望主页上只有滚动条可见。

更新：从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

答案是设置

autoResize:true 

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

这适用于jQuery UI v1.10.3

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

我使用了以下适合我的属性：

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

高度支持自动。

宽度不！

要进行某种自动获取所显示的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);
    }

如果您需要它在IE7中运行，则不能使用未记录，错误和不受支持的 {'width':'auto'}选项。相反，将以下内容添加到您的.dialog()：

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

是否.scrollWidth包含右侧填充取决于浏览器（Firefox与Chrome不同），因此您可以在上添加一个主观的“足够好”的像素.scrollWidth，或用您自己的宽度计算功能替换它。

您可能希望将width: 0这些.dialog()选项包括在内，因为此方法永远不会减小宽度，而只会增加宽度。

经过测试可在IE7，IE8，IE9，IE10，IE11，Firefox 30，Chrome 35和Opera 22中运行。

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

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

做了我需要做的事情以调整对话框的宽度。