133

我有一个显示表单的 JQuery UI 对话框弹出窗口。通过选择表单上的某些选项，新选项将出现在表单中，使其变得更高。这可能会导致主页面有滚动条而 JQuery UI 对话框有滚动条的情况。这种两个滚动条的场景对用户来说是难看和混乱的。

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

4

7 回答 7

140

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

于 2009-04-19T04:47:45.883 回答
48

答案是设置

autoResize:true

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

于 2009-04-16T14:42:40.453 回答
28

这适用于 jQuery UI v1.10.3

$("selector").dialog({height:'auto', width:'auto'});
于 2013-06-05T03:25:15.370 回答
12

我使用了以下对我来说很好的属性：

$('#selector').dialog({
     minHeight: 'auto'
});
于 2012-11-06T09:13:08.077 回答
2

高度支持自动。

宽度不！

要进行某种自动获取您正在显示的 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);
    }
于 2011-12-07T13:57:03.843 回答
2

如果您需要它在 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 中运行。

于 2014-06-25T23:02:50.317 回答
1 
var w = $('#dialogText').text().length;

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

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

于 2011-01-31T05:35:34.577 回答