Set the height in the jQueryUI dialog as height since the content is up to max.

Question

Using jQueryUI dialog boxes, I want to pop up. My problem is that I want to set the height of the dialog, no matter how high its content. If I do not specify the height, this works fine. Height is automatically calculated based on the height of the content. The problem then is that the content is very high, the dialogue is also very high and goes below the window ... maxHeight also does not work in this case.

So, I was able to solve this problem somewhat by adjusting the height and position after displaying the popup. However, while the content is loading (via ajax), it goes well below the screen. It is only upon completion that I can adjust the window. I would rather not have this awkward delay.

UPDATE . Turns out I want something more than just maxHeight. I want the maximum height of INITIAL. Therefore, after loading a data dialog box, it can grow only to a certain height. But after that you can expand the window. This is pretty easy to do:

$('<div><div></div></div>').attr('title', options.title).appendTo('body').dialog({
    open: function() {
        $(this).children().css('maxHeight', maxInitialHeight).load(url, function() {
            thisDialog.$dialog.dialog('option', 'position', 'center');
        });
    }
});

This will dynamically load the dialog from the "url" with the contents up to the height of maxInitialHeight. Nested 2 divs are required.

Answer 1

You can paste your content inside <div class="dialog-data" />and make this div the content of your dialog.

You can then specify using CSS max-heightand overflow: autoon div.dialog-data.

Answer 2

,

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
                }
            );
        };
    });
};

Answer 3

,

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

, . , 400 . , . ... , , .

max-height "auto", , , 1000px .