with jquery UI dialog, is there anyway to have a max height and use 'auto' if its smaller

Question

I want a dialog to have a max height setting but, if the content is smaller, then to shrink down to do what height = 'auto' does. Is this possible in JQuery UI dialog?

Answer 1

You can achieve this by doing the following:

HTML

<div id="dialog" title="Dialog Title">     Dialog content </div> 

JavaScript

$('#dialog').dialog({     resizable: false,     minHeight: 0,     create: function() {         $(this).css("maxHeight", 400);             } }); 

Check out test case on jsFiddle.

Answer 2

I use this:

$('#dialog').dialog({     maxHeight: $(window).height(),     open: function() {         $(this).dialog('option', 'maxHeight', $(window).height());    } }); 

Resetting maxHeight in "open" is useful when window has changed size.

Answer 3

You can do it like this:

 $('#testing').resizable("enable");
 $('#testing').dialog({ maxHeight: 400 });


<div id="testing" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>