views:

6128

answers:

4

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';
 }
});
+2  A: 

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!

(WARNING: this does not answer the question)

Dan Appleyard
this does not answer the question.
CodingWithoutComments
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.
Dan Appleyard
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.
Skipperkongen
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.
Marcus
+1  A: 

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?

Monte Chan
+1  A: 

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.

Monte Chan
A: 

Monte Chan's recommendation fixed my problem - IE8 is very picky about having the DOCTYPE declaration before anything else - in my case it wasn't the wrong type but that I was spitting out text before the declaration. Thanks!

Julius