当所选元素是表格时，为什么 jqueryui.dialog 会忽略高度参数？

Question

当我尝试将 渲染为对话框窗口时，我的 height:750 参数似乎被忽略；内容高度超过 2100px，强制对话框在相同高度渲染，使整个页面滚动： （示例）

另外，这里有一个 $("table").dialog() 调用，其中表比参数短。在此示例中，对话框的高度缩小以匹配表格单元格内容，再次忽略 750 高度参数。 （示例）

解决方法：

在 中渲染表格

标签似乎消除了这个问题，但感觉相当混乱：

Short table +高的文本包裹在 div

长表格包裹在 div

另外，这是我的解决方法我在其中渲染一个空对话框，然后将表拉入窗口作为 open() 回调的一部分：

渲染后解决方法

这种行为不一致是一个错误还是设计使然？

Answer 1

似乎不考虑初始化期间的高度选项而打开表格对话框是设计使然。我的经验是，jQuery UI 组件的行为最一致地包装为

元素，看起来您发现了相同的结果，但正如您所说，这不应该是一个要求。

dialog() 上高度选项的默认值为 auto，它应该缩放对话框以适合元素。当将 table 元素传递给 dialog() 时，可能会出现错误，导致 auto 覆盖 init 时的高度选项。我尝试在第一个示例中更改宽度值，并且 dialog() 通过更改宽度来正确响应，但高度不会改变。我还重新排序了选项，因此高度是第一位的，但这也没有效果。

JS Bin 对我来说效果不佳，所以我将您的代码移至此小提琴并压缩了对话框初始化调用。 https://jsfiddle.net/z601hhjd/

// Open dialog and set height and width on init
// Width option works at initialization but height does not
$(".shortTable").dialog({
     'height':'300',
     'width':'500',
     open: function(event, ui) {
         // Height setter has no effect after init either
         $(this).dialog("option", "height", 200 );

         // Width setter works after initialization too
         $(this).dialog("option", "width", 200 );
     }
});

看起来 jQuery UI 中设置高度有一个错误在与 文档 冲突的 table 元素上，但此功能是与 @Peri 所说的 HTML 规范一致。

Answer 2

我发现 jQuery UI 在指定高度方面过于智能。它尝试发现其容器高度并进行一些计算等。我什至遇到过这样的情况：对话框会正确显示一次，然后在同一对话框的后续加载中分配元素样式高度（不更改对话框配置）选项）。作为一名开发人员，我的观点是我不太喜欢这种“聪明”的行为。

因此，经过一系列在线研究后，我得出的结论是，与其相信 jQueryUI 为我做出决定，不如通过在打开事件中设置对话框的高度来更明确地表达我想要的内容

$(".shortTable").dialog({
    'height': '300',
    'width': '500',
    open: function (event, ui) {
        // Make sure the dialog will resize vertically 
        // if we are messing with the DOM elsewhere
        // (injecting/removing DOM elements)
        $(this).css("height", "auto");
    }
});

：当然，您可以设置一个特定的 px 测量值，而不是“自动”（如果它适合您的需要），但自动应该允许它调整大小以适合您放入其中的任何内容（包括表格）。

每次打开对话框时都会触发 open 方法，因此如果您使用其他 jQuery 验证或 ajax 内容获取重写了对话框的内容，它仍然会很高兴。

Answer 3

这不是因为你不能设置桌子的高度吗？表格没有高度属性 - http://www .w3.org/TR/html401/struct/tables.html#h-11.2.1。你可以用 div 包裹 table，然后它就可以工作了。对话框包含滚动。

http://jsbin.com/omuzoq/2/edit

Answer 4

因此，基本上，当打开对话框时，高度属性会被替换，因为插件会根据屏幕尺寸添加自己的高度（您可以通过查看源代码来检查这一点）。因此，为了使用计算出的高度属性，我们需要禁用此插件添加的所有样式

 $( "#dialog_confirm_message" ).dialog({
                        autoOpen: false,
                        modal: true,
                        open: function(event, ui) {
                                                  $('#dialog_confirm_message').removeAttr('style');
                        },
                        minHeight: 104,
                        height: 120,
                        width: 520
                       });

Answer 5

尝试在开放块中添加顶部 NN：

$( "#dlgEx" ).dialog({
    ...,
    open: function(event, ui) {
        $(this).dialog("option", "top", 10 );
    },