CODEWITHSUNDEEP
jqueryjquery-ui-dialog
leora
leora

Reputation: 196891

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?

Upvotes: 27

Views: 33450

Answers (8)

blairzotron
blairzotron

Reputation: 289

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>

Upvotes: 0

clime
clime

Reputation: 8885

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.

Upvotes: 17

David
David

Reputation: 42247

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.

Upvotes: 0

mekwall
mekwall

Reputation: 28974

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.

Upvotes: 40

anmarti
anmarti

Reputation: 5143

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

Upvotes: 3

Roger
Roger

Reputation: 21

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

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

Upvotes: 2

Jonathon Hill
Jonathon Hill

Reputation: 3495

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

Upvotes: 1

pivotal developer
pivotal developer

Reputation: 503

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>

Upvotes: 3

Related Questions