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

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

Answer 2

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.