jQueryUI dialog box height grows too tall

Question

I have a jQueryUI dialog box that loads its content the moment someone opens it using the "open" event to initiate the $('#dialogDiv').load() call.

Works great except the dialog box grows extremely tall if there's a lot of content being loaded. What I want is to limit the height. The maxHeight jQueryUI dialog option would seem to work perfect, except it only takes effect the moment you resize. The initial load will grow the dialog really tall and then when you try and resize, it immediately shrinks to the maxHeight.

How can I make a dynamically loading dialog box that won't grow beyond a certain height?

Answer 1

Use height option while initalization... for eg-

    <script>
$(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    $( "#dialog" ).dialog( "destroy" );

    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Delete all items": function() {
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});
</script>

here you can see "height:140"

this defines that the dilog will be of only that size, no matter how much data is inside.. for more detais about the events,options,methods download(from here), extract and check out the jquery-ui-1.8.5.custom > development-bundle > docs > dialog.html