In IE8, jquery-ui's dialog set the height of its contents to zero. How can I fix this?

Question

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?

Answer 1

The solution is to call .height(‘auto’) after the dialog is created.

$(document).ready(function() {
    $('#phoneDataButton').click(function() {
        $('#phoneDataSearchForm').dialog({
           modal:true,
           width: 700,
           close: function() {
               $('#phoneSearchResults').html("");
               location.reload(true);
           }
        }).height('auto')
    })
 })

Credit: http://norrisshelton.wordpress.com/2011/10/07/ie8-issues-with-jquery-dialog-causes-box-to-have-wrong-height-and-scrollbars/

Worked for me