JQuery UI 对话框 autoResize 在 Chrome 中不起作用
我遇到了 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 内容时,对话框的大小不会改变,而是出现滚动条。
问题是,在 IE6 中没有 autoResize
选项的情况下测试相同的代码可以正常工作!
所以我想也许是因为谷歌浏览器不支持这个选项。
你能帮我吗?非常感谢您抽出时间。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我遇到了完全相同的问题 - 一位用户总是将对话框打开得太低,即使更新了内容,高度也没有更新。我一开始无法重现这个问题,尝试了几个版本、操作系统等。然后我偶然发现了这个:
http://hustoknow.blogspot.com/2010/10/chrome-and-jquery-ui-min-height-issue.html
似乎是缩放级别导致了问题,位于至少就我而言。如果我使用默认缩放加载原始页面(在 Chrome 中按 Ctrl + 0),对话框将正常打开。然后我关闭了对话框,点击 Ctrl + - (Chrome 缩小),使用 F5 重新加载页面,重新打开对话框,然后出现问题每次。重新加载似乎是强制性的,如果我使用默认缩放加载原始页面并缩小,那么对话框就知道它们的高度。显然,链接中描述的最小高度功能检查是在加载原始页面时运行的。
除了不缩小之外,我还没有找到解决方法,但这也可能是您问题的原因。
I had exactly the same problem- One user had always the dialog opened as too low and the height wasn't updated even if the content was updated. I couldn't reproduce the problem at first, tried with several versions, OS's etc. Then I stumbled upon this:
http://hustoknow.blogspot.com/2010/10/chrome-and-jquery-ui-min-height-issue.html
It seems that the zoom level caused the issue, at least in my case. If I loaded the original page with default zoom (hit Ctrl + 0 in Chrome), the dialog opens ok. Then I closed the dialog, hit Ctrl + - (Chrome zooms out), reloaded the page with F5, reopened the dialog and the problem occurred every time. Reloading seems mandatory, if I loaded the original page with the default zoom and zoomed out then, the dialogs knew their heights. Apparently the min-height capability check described in link is run when loading the original page.
I haven't yet figured out a workaround other than not to zoom out, but that might be the cause of your problem too.
我发现 jQuery UI 在创建/打开对话框时显式设置元素的高度。因此,一个有用的解决方法是在打开后简单地重置元素的 css 高度属性,如下所示:
I found that jQuery UI explicitly sets the element's height when creating / opening the dialog. Therefore a useful workaround is to simply reset the element's css height attribute after opening like so:
如果我们不知道要显示多少内容,可以使用可调整大小的选项 用于 jquery ui modla 对话框。您还可以尝试 autoresize 插件
If we don't know how much content we are going to display better to use resizable option for the jquery ui modla dialog.You can as well try out the autoresize plugin