Adjust Height On Jqueryui Dialog To Be As Tall As Content Up To A Max

Using jQueryUI's dialog boxes, I want to popup information. My problem is I want to set the height of the dialog to however high the content is. If I don't specify a height, this

Solution 1:

You could insert your content inside a <div class="dialog-data" /> and make that div the content of your dialog.

Then you could, with CSS, specify a max-height and overflow: auto to your div.dialog-data.

Solution 2:

maybe like this

options.open = function() {
    var dialog = $(this).dialog('widget');
    var content = dialog.find('.ui-dialog-content');
    $.ajax({
        url: 'this your url',
        success: function(result, status, xhr) {
            content.empty().append(result);
            content.dialog(
                'option',
                {
                    // this your options
                }
            );
        };
    });
};

Solution 3:

Here's a much more concise way that is working for me

$(targetElement).css('max-height', '400px').dialog({
  'resize' : function() {
    $(this).css('max-height', '1000px');
  }
});

First set max-height on the thing you are putting in the dialog. It appears on the screen no bigger that 400px. But as soon as you start dragging it, the restriction is lifted. ... just what I wanted, and much cleaner code.

I tried to set max-height back to 'auto' as well, but that didn;t seem to stick, so 1000px is OK for me.