Dialog: Auto height does not respect the maxHeight option.

[jamesbathgate]

If you have a very large dialog box with the height option set to 'auto', and the max height option defined, the height of the dialog box can exceed the max height.

[Simon1979]

Does anybody have a workaround for this?

[Simon1979]

Replying to Simon1979:

Does anybody have a workaround for this?

Hmm.. actually I found a workaround for now: Wrapping the contents in a div with max-height set.

So instead of something like $dialog.html(contents);

I now have

$dialog.html("<div style='max-height: 480px;'>" + contents + "</div>");

Probably not the best way but seems to work for what I'm trying to achieve

[borgenk]

Cheers Simon1979, fixed with almost the same solution:

$(".dialog").dialog({
    open: function(event, ui) {
        $(this).css({'max-height': 400, 'overflow-y': 'auto'}); 
    },
    ...........

Replying to Simon1979:

Replying to Simon1979:

Does anybody have a workaround for this?

Hmm.. actually I found a workaround for now: Wrapping the contents in a div with max-height set.

So instead of something like $dialog.html(contents);

I now have

$dialog.html("<div style='max-height: 480px;'>" + contents + "</div>");

Probably not the best way but seems to work for what I'm trying to achieve

[probins]

this currently half works, as maxHeight is being set on the resizable widget but not on the dialog box. This means it won't work on initial display, but will if you then resize the box. I've submitted a patch to set on the dialog box whether it's resizable or not  http://github.com/probins/jquery-ui/blob/228369728e3471b12cb6d7b337c9b41490d9804c/ui/jquery.ui.dialog.js

[drew.waddell]

I am not sure if this is part of this bug and don't want to create a new ticket if it isn't necessary but you are able to set the height greater than the maxHeight on open of the dialog.

dialog. ( {
height : 400,
maxHeight : 200
} );

This will open the dialog to a height of 400 and will only respect maxHeight when the dialog is resized. If you are using dynamic variables for the height and maxHeight I believe when opening if the height is greater than the maxHeight that the maxHeight should be used instead.

[tomjung]

I'm not sure what the status is on this but I am still having the issue. I tried these two things:

$(".selector").dialog({autoOpen: false, modal: true, width: 700, maxHeight: 400});

$( ".selector" ).dialog( "option", "maxHeight", 400 );

Setting the height will work, but maxHeight still has issues.

[kalou]

UP! Works when the dialog window is resized, but not when the contents change.

[vol7ron]

Additionally you could apply your own CSS; something like:

$('#dialog')
   .dialog( { modal : true } )
   .css( { 'max-height' : '50px' } );

[tj.vantoll]

This is still relevant in 1.9 -  http://jsfiddle.net/tj_vantoll/yZ24j/.

[Scott González]

Dialog: Respect maxHeight when determining size on open. Fixes #4820 - Dialog: Auto height does not respect the maxHeight option.

Changeset: d4551bc3b8dfbfd925700dcb9f71e7729b125889