I'm having a lot of problems with sizing of dialogs in jQuery UI 1.7
and IE 7.
Everything works fine in Firefox but I find the following behaviors
with IE:
1. Something seems weird with the content size. If I have a table in
my dialog with 6 rows and set the height of my dialog to 325, the
dialog "collapses". The content height is set to about 5 pixels and
I'm left with basically a view of the title and dialog buttons. If I
grab the resize handle and move it, the dialog snaps into the correct
size.
2. As an odd workaround, if I add a 7th row to my table, and leave the
height the same, the height is displayed correctly. Stranger still, if
I then increase the height of my 7 row dialog to about 345, the dialog
again collapses. This seems extremely counter intuitive. Increasing
the height actually causes the dialog to somehow perceive the height
of the content as less.
3. There's an issue with the width as well. With my workaround to get
the height to display semi-correctly, the width of the content is
incorrect. The form elements on the right side of my table are clipped
off a bit. The dialog width is correct, but the content width seems to
be about 75% of the full dialog size, so I'm now missing part of my
form. I see the same behavior as above though; If I grab and resize,
the dialog snaps back into place.
I've read about several similar issues with the height in IE7, but
everything I've read states that they were fixed in 1.7. Has anyone
else seen similar problems, or has a workaround for them?
Heres my diag:
$("#createSampleDialog").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
height: 325,
minHeight: 325,
width: 400,
minWidth: 400,
buttons: {
'Submit': function() {
selectNewSample();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
<div id="createSampleDialog" title="Add New Sample">
<table cellpadding="3" cellspacing="0">
<tr>
<td>A:</td>
<td>
<s:select id="a" cssClass="inputCS"
list="a" listKey="a"
listValue="a" />
</td>
</tr>
<tr>
<td>B:</td>
<td><input id="b" class="inputCS"
type="text"/></td>
</tr>
<tr>
<td>C:</td>
<td>
<s:select id="C" cssClass="inputCS"
list="C" listKey="C"
listValue="name" />
</td>
</tr>
<tr>
<td>D:</td>
<td><input id="d" class="inputCS"
type="text"/></td>
</tr>
<tr>
<td>E:</td>
<td><input id="E" class="inputCS"
type="text"/></td>
</tr>
<tr>
<td>F:</td>
<td><input id="F" class="inputCS"
type="text"/></td>
</tr>
</table>
</div>
And again, using 1.7 of UI, and 1.3.2 of jQuery.
Thanks,
Tim O
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
