Question

当我尝试将<table>渲染为对话窗口时，我的height:750参数似乎被忽略了;超过2100px的内容强制对话框呈现相同的高度，使整个页面滚动：(example)

此外，这是一个$("table").dialog()调用，其中表更短而不是参数。在此示例中，对话框的高度会缩小以匹配表格单元格内容，同样忽略750高度参数。 (example)

解决方法：

在<div>标记内渲染表似乎可以消除这个问题，但感觉相当糟糕：

Short table + Tall text wrapped in div

Long table wrapped in div

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

After-render workaround

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

Answer 1

在初始化期间不考虑高度选项似乎不打开表对话框是设计的。我的经验是，jQuery UI组件的行为最一致地包装为<div>元素，看起来你发现了相同的结果，但正如你所说，这不应该是一个要求。

dialog（）上的height选项的默认值为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中存在一个错误，用于设置与documentation冲突的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测量而不是“自动”，但是auto应该允许它根据您放入的任何内容（包括表格）进行调整。

每次打开对话框时都会触发open方法，所以如果你用其他jQuery验证或ajax内容重新编写对话框的内容，它仍然会很高兴。

Answer 3

不是因为你不能在桌子上设置高度吗？表格{ - 3}}没有高度属性。你可以用div包装表然后它的工作原理。对话框包含滚动。

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1

Answer 4

所以基本上打开对话框时，当插件向w.r.t添加自己的高度时，height属性会被替换。屏幕大小（您可以通过查看源来检查）。所以为了使用计算出的高度atttributes，我们需要禁用这个插件添加的所有样式

 $( "#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 );
    },

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

5 个答案: