How can I dynamically determine the height of a jquery ui dialog?

Question

I am displaying a jquery UI dialog with a lot of content and I don't want the dialog height larger than the vertical parent window. For now I have been just hardcoding height to be 740

$("#myDialogContainer").dialog({
    resizable: false,
    height: 740,
    autoOpen: false,
    width: 1065,
    modal: true

but for people with large monitors this "cutoff" is unnecessary. If I do auto then its too long vertically with people with small monitors, laptops, etc.

How can I set the height to always fit within the parent window and scroll if its larger but don't scroll if not required?

Answer 1

try this!

$(function() {
var maxHeight = $(window).height();
$(window).resize(function(){
    maxHeight = $(this).height();
    $( "#myDialogContainer" ).dialog( "option", "height", maxHeight );
}); 
$( "#myDialogContainer" ).dialog({
  resizable: false,
  height: maxHeight,
  modal: true,
  buttons: {
    "Delete all items": function() {
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});

});