jQuery UI Dialog Issue With IE

StackOverflow https://stackoverflow.com/questions/630984

Question

I am using the new jQuery 1.3.2 and jQuery-ui-1.7 libraries along with the UI Dialog. I have a div tag with several form elements (textbox, checkbox, etc.) in it. Upon page load, jQuery shows the div as a dialog. This works absolutely fine in FF, but in IE, the height of the div is wrong. It is just showing the title bar a bit of the content. I explicitly set the height when creating the div. If I set the height option after opening the dialog, the height is corrected, but the content is blank (shows the top third of a textbox). If I allow the dialog to be resizable, if you resize it in IE it works fine, but I don't want to force IE users to resize just to see the contents. Any ideas? Here is the code I use to create the dialog:

$('#dialogDiv').dialog({ 
    bgiframe: true, 
    height: 400, 
    width: 620, 
    modal: true, 
    draggable: true, 
    resizable: false, 
    close: function(event, ui) {
        if($('#agree').val() != '1')
            location.href = 'somepage.html';
    }
});
Was it helpful?

Solution 6

I have answered my own question. I just had to play with the height properties of dialog and some of the elements within the dialog. Good call me!

OTHER TIPS

After doing some Google searches, I found the true answer to the question. It is caused by an incompatible Doctype. Please go to http://osdir.com/ml/jquery-ui/2009-08/msg00388.html for more information.

I tried it on my codes and the solution in this URL DOES solve the problem.

I was experiencing this same issue in IE7 and took a deeper look into the symptoms and solution. I noticed that when I created a dummy dialog with no content then the height rendered correctly. Thus, I started playing around with various types of content to see if I could write the content differently to overcome the issue. No luck. What I did discover, however, was that the more content I added, the shorter the dialog got in IE7 only (even hidden items shorten it a bit). Thus, simple content will likely not have much noticeable effect (and, thus, the lack of more complaints on this issue). The table and many form items I was adding create a very noticeable effect.

Setting the height to auto works somewhat well but IE7 still miscalculates the height on my content by about 10 pixels too short (possibly the padding height on an object) and thus jQuery adds the scrollbar. Not perfect, but acceptable given what follows.

Having failed to find another workaround, I started looking into the DOCTYPE solution. I discovered that our site's DOCTYPE -- although it looks correct -- it actually puts all browsers into "Quirks Mode" and that this is the true source of the issue. I doubt that jQuery supports quirks mode issues so I doubt this will ever be fixed.

My current DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

What it should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Even this older DOCTYPE worked:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

Thus, it is not that the DOCTYPE must be the HTML 5 value of <!DOCTYPE html>, it is that it must be a valid DOCTYPE (HTML 4 or 5 -- not sure about XHTML) that will set IE7 to something other than quirks mode (Firefox works okay either way). See:

http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

I don't have the option to change our site's DOCTYPE so I have to use another solution such as auto height. I noticed there are other differences between quirks and standards modes when using the jQuery Dialog so I have to deal with those as well (namely, font-size percentages are accumulated differently in both IE7 and Firefox).

I came across the same problem too. Yes, by not specifying the height, IE does resize the dialog box and shows its contents. However, I don't want the modal dialog box to keep growing as the contents get longer. The ideal would be to display the dialog box with the specified height and the users can view the contents by using the scroll bar. This works perfectly in FireFox. Does anyone have a solution for IE?

I was able to fix this by giving a unit on the height like this:

$(id).dialog({ modal: true, height: h + "px", width: w });

I didn't have to mess with the doctype. This was on IE8, jQuery 1.4.4, and jQuery UI 1.8.9.

--Was to quick to post this one. That breaks it in Firefox. Ignore me!

I got similar problems when using font-sizes in pixels. font-size:11px - font-size:15px; in css caused the height problems in ie9. font-size:16px; and up works fine in ie9

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top