maintain dialog center with dynamic content

Question

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 get 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 could potentially go beyond the bounds of the page so I would think I could use a max height to prevent that but what do I do if they re-size the window ?

thanks for any help

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

Answer 1

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.

Answer 2

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 adde an open function as suggested in this ticket as a work around to get autoHeight to respect maxHeight

that said I really wanted to use body height not document and 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');
            }
        }
    });