JQuery UI 对话框自动调整大小在 Chrome 中不起作用

Question

我在使用 JQuery 对话框 autoResize 选项时遇到问题。我使用对话框来显示 AJAX 调用结果，所以我无法预测对话框的最终高度。我想自己调整它的高度到它的内容大小。我在那里读到了autoResize 选项，但似乎无法正常工作。

这是我的代码：

    $("#my_dialog").dialog({
        modal:true,
        autoResize: true,
        open:function(){
            $(this).parents(".ui-dialog:first").find(".ui-widget-header")
            .removeClass("ui-widget-header").addClass("ui-widget-header-ia");
        }
    });

但是在加载AJAX内容时，Dialog的大小并没有改变，而是出现了一个滚动条。

问题是在 IE6 中没有 autoResizeoption 的情况下测试相同的代码可以正常工作！！

所以我在想可能是因为谷歌浏览器不支持这个选项。

你能帮帮我吗？非常感谢您的宝贵时间。

Answer 1

我遇到了完全相同的问题 - 一位用户总是打开的对话框太低，即使内容已更新，高度也没有更新。一开始我无法重现这个问题，尝试了几个版本、操作系统等。然后我偶然发现了这个：

http://hustoknow.blogspot.com/2010/10/chrome-and-jquery-ui-min-height-issue.html

似乎是缩放级别导致了问题，至少在我的情况下是这样。如果我使用默认缩放加载原始页面（在 Chrome 中点击 Ctrl + 0），对话框将正常打开。然后我关闭对话框，点击 Ctrl + -（Chrome 缩小），用 F5 重新加载页面，重新打开对话框并出现问题每次。重新加载似乎是强制性的，如果我使用默认缩放加载原始页面然后缩小，对话框知道它们的高度。显然，链接中描述的最小高度能力检查是在加载原始页面时运行的。

除了不缩小之外，我还没有找到解决方法，但这也可能是您的问题的原因。

Answer 2

我发现 jQuery UI 在创建/打开对话框时会显式设置元素的高度。因此，一个有用的解决方法是简单地重置元素的css高度属性在打开之后像这样：

  element.dialog('open');
  element.css('height', '');

Answer 3

如果我们不知道要显示多少内容，最好使用 resizable option 用于 jquery ui modla 对话框。您也可以尝试 autoresize plugin