CODEWITHSUNDEEP
jqueryhtmljquery-uihtml-tablejquery-ui-dialog
Jake
Jake

Reputation: 4899

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

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?

Upvotes: 4

Views: 8353

Answers (5)

Denys Rusov
Denys Rusov

Reputation: 620

Try to add top NN in open block:

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

Upvotes: 0

Dylan Valade
Dylan Valade

Reputation: 5605

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.

Upvotes: 5

Sagar Patni
Sagar Patni

Reputation: 312

So basically when open the dialog the height attribute is getting replaced as the plugin is adding its own height to it w.r.t. the screen size(you can check this by doing view source). so in order to use the computed height atttributes we need to disable all the 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
                       });

Upvotes: 0

BenSwayne
BenSwayne

Reputation: 16900

I find that jQuery UI tries to be too smart when it comes to specifying a height. It tries to discover its container height and do some calculations, etc. I've even had cases where the dialog would show correctly once and then get an element style height assigned in subsequent loads of the same dialog (with no changes to the dialogs config options). My opinion as a developer is that I don't like that "smart" behaviour very much.

So after a bunch of online research I came to the conclusion that rather than trusting jQueryUI to make my decisions for me, it was better for me to be a little more explicit with what I wanted by setting the dialog's height in the 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 could set a specific px measurement if it fits your needs but auto should allow it to size to whatever content you put in there including a table.

The open method will fire every time the dialog is opened so if you've re-written the dialog's content with some other jQuery validation or ajax content fetching it'll still be happy.

Upvotes: 3

Piotr Perak
Piotr Perak

Reputation: 11088

Isn't that because you can't set height on table? There is no height attribute for table - http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1. You can wrap table with div and then it works. Dialog contains scroll.

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

Upvotes: 2

Related Questions