Maintain a dialog center with dynamic content

I would have a dialog with the following

$("#statusbox").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    width: 'auto',
    height:'auto',
    title:"Check Order Status",
    buttons: {
        Find: function() {
            get_status();
        },
        Close: function() {
            $(this).dialog('close');
        }
    }
});

And when the user hits the find button, it runs Ajax and returns orders to the dialog, and it gets dynamically re-sized, but it only extends the box down. Is there way to make the box extend up and down so that the dialog remains centered?

Also if there was enough content then it c开发者_StackOverflowould potentially go beyond the bounds of the page, so I would think I could use a maximum height to prevent that, but what do I do if they re-size the window?

I tried adding maxHeight: 500, and that didn't stop it from extending off the bottom.

You have code that puts the dialog in the middle of the screen I presume? Run that after it gets re-populated with new information.

Write some new code that ensures the box isn't taller than the window. If it is, set the height of the dialog to the height of the window (or less if you want padding), and set overflow to scroll. Run this code whenever they resize the window as well.

OK, well I've got it working, well sort of not 100%, but pretty darn close.

I set the position to 'top' since auto always expands down. Then I added an open function as suggested in a ticket as a workaround to get autoHeight to respect maxHeight.

That said, I really wanted to use body height, not document, and I am not sure why I had to subtract 200 from that ?

$("#statusbox").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    width: 'auto',
    height:'auto',
    position: 'top',
    title:"Check Order Status",
    open: function(event, ui) {
        $(this).css({'max-height': $(document).height()-200, 'overflow-y': 'auto'});
    },
    buttons: {
        Find: function() {
            get_status();
        },
        Close: function() {
            $(this).dialog('close');
        }
    }
});