javascript - Adjust height on jQueryUI dialog to be as tall as content up to a max - Stack Overflow

admin管理员组

文章数量:1426227

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 works perfect. The height is automatically calculated based on the height of the content. Problem then is if the content is very tall, the dialog gets very tall too and goes below the window... maxHeight doesn't work well in this case either.

So I've been able to somewhat resolve this by adjusting the height and position after displaying the popup. However, while the content is being loaded (through ajax), it goes well below the screen. It's only after finishing that I can readjust the window. I'd rather not have that awkward delay.

UPDATE: Turns out I want something even more than just a maxHeight. I want a max INITIAL height. So after loading the dialog with data, it can only grow to a certain height. But after, you're allowed to expand the window. It's pretty easy to acplish this:

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

That will dynamically load a dialog from 'url' with content up to a maxInitialHeight height. The 2 divs nested are necessary.

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 works perfect. The height is automatically calculated based on the height of the content. Problem then is if the content is very tall, the dialog gets very tall too and goes below the window... maxHeight doesn't work well in this case either.

So I've been able to somewhat resolve this by adjusting the height and position after displaying the popup. However, while the content is being loaded (through ajax), it goes well below the screen. It's only after finishing that I can readjust the window. I'd rather not have that awkward delay.

UPDATE: Turns out I want something even more than just a maxHeight. I want a max INITIAL height. So after loading the dialog with data, it can only grow to a certain height. But after, you're allowed to expand the window. It's pretty easy to acplish this:

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

That will dynamically load a dialog from 'url' with content up to a maxInitialHeight height. The 2 divs nested are necessary.

• javascript
• jquery
• html
• css
• jquery-ui

Share Improve this question Follow edited Oct 28, 2010 at 1:19 at. asked Oct 27, 2010 at 10:58 at.at. 52.7k105105 gold badges304304 silver badges471471 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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

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.

本文标签： javascriptAdjust height on jQueryUI dialog to be as tall as content up to a maxStack Overflow