I mentioned in my previous post that I was having trouble with jQuery Dialog’s height in IE7, which curiously shrank or enlarged with alternate open/close events. Further investigation using the IE and FF web developer tools revealed that an in-line style, dynamically generated by jQuery, was setting the Dialog’s min-height property to either 0px or 56px with every other opening. The presence of this in-line style certainly explains why every attempt to override the height and min-height attributes in the CSS or with jQuery’s CSS functions failed to produce the desired display behaviour. My solution, which the developer tools in both browsers indicate is keeping minimum height at zero for every opening thus allowing the height default ‘auto’ to do its good work, is to use jQuery to set the min-height after the Dialog has been instantiated and opened (remember, dear reader, IE7 freaks out if you attempt to set the height or minHeight options in the Dialog constructor as per the API documentation).
So, first instantiate your Dialog, passing in those constructor arguments acceptable to IE7:
if($.browser.msie){
$("#confDialog").dialog({autoOpen: false, bgiframe: true, buttons: buttons, modal: true});
}
Next open the Dialog and reset the min-height attribute to zero:
$("#confDialog").dialog("open");
$(".ui-dialog-content").css("min-height", "0");
Because, as it seems, it is the open process that dynamically adds the in-line min-height to the Dialog’s content area mark-up, it is necessary to reset this property after invoking Dialog’s open function.