Question

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

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

Answer 1

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

Answer 2

答案是设置

autoResize:true

创建对话框时的

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

Answer 3

这适用于jQuery UI v1.10.3

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

Answer 4

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

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

Answer 5

自动支持高度。

宽度不是！

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

Answer 6

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

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

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

Answer 7

如果您需要在IE7中使用它，则无法使用undocumented, buggy, and unsupported {'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中使用。

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

7 个答案: