CODEWITHSUNDEEP
javascriptjquery-uijqueryjquery-ui-dialog
at.
at.

Reputation: 52580

jQueryUI dialog box height grows too tall

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?

Upvotes: 4

Views: 2764

Answers (2)

deva
deva

Reputation: 31

Adding the CSS position:absolute;overflow:hidden for class .ui-dialog will fix the problem.

Upvotes: 3

Kuntal Basu
Kuntal Basu

Reputation: 830

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

Upvotes: 1

Related Questions