Dialog: Auto height does not respect the maxHeight option.

Does anybody have a workaround for this?

Replying to [comment:2 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

Cheers Simon1979, fixed with almost the same solution:

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

Replying to [comment:3 Simon1979]:

Replying to [comment:2 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

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

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.

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.

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

Additionally you could apply your own CSS; something like:

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

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

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

Changeset: d4551bc3b8dfbfd925700dcb9f71e7729b125889