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

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?

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.

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.

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>

Roger

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

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

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

I think you could work together with heightand maxHeight and fit the dialog height when your div content height < dialog maxheight. Do this when the dialog is open. Like this:

<div id="dialog">
  <div id="contents">
    <input type="text" style="height:3000px"
  </div>  
</div>


    $('#dialog').dialog({
      autoOpen: false,
      maxHeight:400,
      height:400,
      buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open:function(){
       var s = $('#contents').height();
       var s2 = $(this).dialog( "option", "maxHeight" );
       if(s < s2){
         $(this).height(s);
       }
    }
});

try it changing the style="height:3000pxvalue: http://jsbin.com/iwecuf/2/edit

Let me throw my 2 cents in.

Create a CSS Style like so

.d-maxheight {  max-height:200px; }

Now simply tell the dialog to apply that class to the dialog

$(document).ready(function(){
  $(d).dialog({
    dialogClass: 'd-maxheight',
    height:400
  });
});

Here is an example in jsbin

As long as you content is less than the max height it will automatically size. If not the max height will take effect and you will get a scroll bar inside the dialog.

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>

来源：https://stackoverflow.com/questions/5661913/with-jquery-ui-dialog-is-there-anyway-to-have-a-max-height-and-use-auto-if-it

标签

jquery

jquery-ui-dialog