Why does jqueryui.dialog ignore the height parameter when the selected element is a table?

Question

When I attempt to render a <table> as a dialog window, my height:750 parameter seems to be ignored; the content, over 2100px in height, forces the dialog to render at the same height, making the whole page scroll: (example)

Also, here is a $("table").dialog() call where the table is shorter than the parameter. In this example, the dialog shrinks in height to match the table cell contents, again ignoring the 750 height parameter. (example)

Workarounds:

Rendering tables inside a <div> tag seems to eliminate this issue, but feels rather kludgy:

Short table + Tall text wrapped in div

Long table wrapped in div

Also, here is my workaround where I render an empty dialog and then pull the table into the window as part of the open() callback:

After-render workaround

Is this behavioral inconsistency a bug or is this by design?

Answer 1

It doesn't seem like opening a table dialog without regard to the height option during initialization would be by design. My experience has been that jQuery UI components behave most consistently wrapped as <div> elements and it looks like you found the same result but as you said, that shouldn't be a requirement.

The default value for the height option on dialog() is auto, which should scale the dialog to fit the element. It's possible there is a bug when a table element is passed to dialog() causing auto to override the height options at init. I tried changing the width value in your first example and dialog() does respond correctly by changing the width but height does not budge. I also reordered the options so height was first but that also did not have an effect.

JS Bin doesn't work well for me so I moved your code to this fiddle and condensed the dialog init call. 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 );
     }
});

It looks like there is a bug in jQuery UI for setting the height on table elements which conflicts with the documentation but this functionality is consistent with the HTML specs as @Peri said.