Geek Answers Handbook

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

When I try to display <table> as a dialog box, my height:750 parameter seems to be ignored; content over 2100 pixels in height causes the dialog to display at the same height, scrolling the entire page: (example)

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

Workarounds:

Rendering tables inside the <div> tag seems to fix this problem, but it feels pretty kludgy:

Short table + Tall text wrapped in div

A long table wrapped in a div

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

Workaround after rendering

Is this behavioral inconsistency a mistake or is it design?

+4
source share
4 answers

It seems that opening the table dialog box without taking into account the height parameter during initialization would be by design. My experience is that jQuery UI components behave most sequentially, wrapped as <div> elements, and it looks like you found the same result, but as you said, this should not be a requirement.

The default value for the height parameter in the dialog box () is auto , which should scale the dialog box according to the element. Perhaps there is an error when the table element is passed to dialog() , forcing auto override the height parameters in init. I tried to change the width value in the first example, and dialog() answered correctly by changing the width, but the height did not budge. I also reordered the parameters so that the height was first, but that also had no effect.

JS Bin doesn't work well for me, so I moved your code to this fiddle and squeezed the init dialog 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 seems like there is an error in jQuery UI for setting the height on table elements that conflict with the documentation , but this functionality is in accordance with the HTML specifications, as @Peri said.

+4
source

I find the jQuery user interface is trying to be too smart when it comes to determining heights. He tries to detect the height of his container and perform some calculations, etc. I even had cases where the dialog will be displayed correctly once, and then get the element style height assigned in subsequent downloads of the same dialog (without changing the settings of the option dialogs). My opinion as a developer is that I don't really like this smart behavior.

So, after doing some online research, I came to the conclusion that instead of trusting jQueryUI to make my decisions for me, I had a better understanding of what I wanted by setting the height of the dialog in an open event:

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

Of course, instead of "auto" you can set a specific dimension in pixels if it suits your needs, but auto should allow the size of any content you put there, including the table.

The public method will fire every time the dialog is opened, so if you rewrite the contents of the dialog box with some other jQuery validation or extract the contents of ajax, it will still be happy.

+3
source

Isn't that because you cannot set the height of the table? There is no height attribute for the table - http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1 . You can wrap the div table and then it will work. The dialog contains a scroll.

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

+2
source

So, basically, when you open a dialog, the height attribute gets replaced, since the plugin adds its own wrt screen size to it (you can check this by making the view source). therefore, in order to use calculated height values, we need to disable all styles added by this plugin

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

More articles:


All Articles