26

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';
    }
});
Improve this question

6 Answers 6

Reset to default
30

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is the true answer to the problem. I have had the same issue and including the DOCTYPE does in fact solve a few styling issues with jQuery.
19

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).

Improve this answer

Comments

4

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?

Improve this answer

Comments

0

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!

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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!

Improve this answer

5 Comments

this does not answer the question.
I had to resize some textboxes in the div tag that was acting as my dialog and removed the height attribute in my jquery code. If other individuals were able to solve their problems based off my own answer I think it DOES answer the question.
I can confirm that not specifying the height property in the object passed to dialog({...}) makes it work in IE. I have no idea why though.
Not specifying the height property also worked for me. This did not used to happen to me in IE. We added some HTML code around the dialog - there was something in this addition which caused this behavior I believe.
Why not place this as a comment to the question rather than the answer section?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.