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?

回答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.

回答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.

回答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>

回答4:

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

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

回答5:

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

回答6:

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

回答7:

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.

回答8:

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