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 di

Answer 1

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>

Answer 2

Bug #4820 in jQuery UI Dialog is applicable, and you may be interested in the workarounds.

Answer 3

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 4

You can wrap the dialog contents in another div that has max-height applied, like this:

<div id="dialog">
  <div style="max-height: 400px;">
      POPUP CONTENTS GO HERE
  </div>
</div>

Answer 5

After dialog .open(), and filling with .html():

$("#div").css('max-height','500px');

Answer 6

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.