In IE8, jquery-ui's dialog set the height of its contents to zero. How can I fix this?
- by brahn
I am using jquery UI's dialog widget to render a modal dialog in my web application. I do this by passing the ID of the desired DOM element into the following function:
var setupDialog = function (eltId) {
$("#" + eltId).dialog({
autoOpen: false,
width: 610,
minWidth: 610,
height: 450,
minHeight: 200,
modal: true,
resizable: false,
draggable: false,
});
};
Everything works just fine in Firefox, Safari, and Chrome. However, in IE 8 when the dialog is opened only the div.ui-dialog-titlebar is visible -- the div.ui-dialog-contents are not.
The problem seems to be that while in the modern browsers, the div.ui-dialog-contents has a specific height set in its style, i.e. after opening the dialog, the resulting HTML is:
<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
style="width: auto; min-height: 198px; height: 448px">...</div>
while in IE8 the height style attribute is set to zero, and the resulting HTML is:
<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
style="min-height: 0px; width: auto; height: 0px">...</div>
What do I need to do to get the height (and min-height) style attributes set correctly?
