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

Question

我有一个使用JQuery UI弹出窗口来显示表单的功能。当在表单上选择某些选项时，会出现新的选项，导致表单高度增加。这可能会导致主页面和JQuery UI对话框都出现滚动条。用户界面上存在两个滚动条是不美观且令人困惑的。

如何使JQuery UI对话框根据其内容自适应大小（可能缩小），同时不显示滚动条？我希望只有主页面上出现滚动条。

- MikeN

---

我建议您发布一段代码示例，没有看到对话框的结构很难推荐解决方案。 - Diego

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

- cgp

---

这对我没用。相反，我将选项“宽度”设置为“自动”。 - Sam

此回答已不适用于1.8.4版本，请改用height auto。http://forum.jquery.com/topic/dialog-auto-width - Jeff

我收到了这个错误信息："未捕获的错误：在初始化对话框之前无法调用方法；尝试调用方法'resize'。" - Hamish Grubijan

错误：对话框小部件实例没有“resize”方法。 - Олег Всильдеревьев

我没有看到这个工作，只是因为你添加的文本没有跨越到下一行。它不会随着更多内容而调整大小。 - Brunis

Answer 2

把答案设为

的设置。

autoResize:true 

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

- MikeN

---

太棒了 :) 但是为什么jQuery没有把这个放在他们的文档中呢？不管怎样，谢谢你。 - Wahid Bitar

请注意，它不能与触发器插件（如at、my、off等）一起使用来定位。 - Jeffz

Answer 3

这适用于 jQuery UI v1.10.3

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

- IlludiumPu36

---

我也试过了（v1.11.1）。 - Jay Cummins

Answer 4

我使用了以下属性，它对我来说很有效：

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

- emolah

---

使用jQuery UI 1.12工作 - Nguyên Ngô Duy

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

- The Demz

Answer 6

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

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

对于调整对话框宽度，它做到了我需要的。

- user596393

Answer 7

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

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

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

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

已在IE7、IE8、IE9、IE10、IE11、Firefox 30、Chrome 35和Opera 22中测试通过。

- Val Kornea