Opened 12 years ago
Closed 11 years ago
#3148 closed bug (fixed)
UI/Dialog: dialog teleports up/down when dragged or resized in MSIE
| Reported by: | Owned by: | eduardo | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.7 |
| Component: | ui.dialog | Version: | 1.5.2 |
| Keywords: | dialog msie resize drag jumps | Cc: | |
| Blocked by: | Blocking: |
Description
Using Firefox, things are OK. Using MSIE7, a dialog jumps down (thousands of pixels) when resized. When resizable & draggable turned on, dialog jumps down, then when resized again jumps up, and then acts normally from then forward.
The up/down behavior changes a bit, but doesn't go away, if bgiframe is enabled/disabled.
Note that this behavior doesn't occur when the dialog is at the top of the form, but at the bottom. Here is my example. Sorry that it's long, but most of that is needed filler for the example.
<html>
<head>
<title>Testing UI/Dialog</title>
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/jquery.bgiframe.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui.dialog.js"></script>
<script type="text/javascript" src="js/ui.resizable.js"></script>
<link rel="stylesheet" type="text/css" href="css/flora.dialog.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/flora.resizable.css" media="screen"/>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#dialogTest').addClass('flora').dialog({autoOpen: false, modal: true, bgiframe: true});
$('#bttn1').click(function() {
$('#dialogTest').dialog('open'); return false;
});
$("a.closeAction").click(function() {
$("#dialogTest").dialog('close');
return false; // prevents link from doing anything other than what we script
});
});
</script>
</head>
<body>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div>
<div title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p> close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
<div id="jpm_uidialog_test">
<button id="bttn1" value="Open the Dialog">Open the UI Dialog</button>
<div id="dialogTest" title="This is the dialog's title" >
<div>
<table>
<tr>
<td style="background-color: blue;"> I am a title </td>
</tr>
<tr>
<td>Name:</td>
<td>Jerome</td>
</tr>
<tr>
<td>Title</td>
<td>Java Czar</td>
</tr>
</table>
<p><a href="#" class="closeAction">Click here</a> to close dialog.</p>
</div>
Hey, check it out!<br />I'm a dialog box!!!
</div>
</body>
</html>
Change History (8)
comment:1 Changed 12 years ago by
| Component: | ui.core → ui.dialog |
|---|---|
| Milestone: | → TDB |
| Owner: | changed from paul to scott.gonzalez |
| Priority: | major → minor |
comment:2 Changed 12 years ago by
comment:3 Changed 12 years ago by
I've done a bit of further digging... This block of code seems to be what's causing the problem in this instance. If I comment it out then the jumping-dialog-on-resize-when-page-scrolled behaviour in my application is cured.
// bugfix #1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
// sOffset decides if document scrollOffset will be added to the top/left of the resizable element
var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css('position')) && !(/relative/).test(el.parent().css('position'));
var dscrollt = sOffset ? o.documentScroll.top : 0, dscrolll = sOffset ? o.documentScroll.left : 0;
el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });
}
The description on the other report looks like it's trying to cure the reverse problem (the dialog jumping the other way). Perhaps whatever it was working around when it was put in to fix #1749 has been fixed elsewhere? I don't know about jquery to be able to say, I'm afraid!
comment:4 Changed 12 years ago by
| Owner: | changed from scott.gonzalez to eduardo |
|---|---|
| Status: | new → assigned |
comment:5 follow-up: 6 Changed 11 years ago by
In 1.6rc4 the dragging of dialogs seems to not suffer from jumping around in IE6, however it does seem to cause the redraw of them to get corrupted (at least in my VirtualBox test environment - I'll try establish if it's just down to the display environment). The resizing of dialogs does still trigger the dialog jumping down the page by the amount the page is scrolled by still though under IE6.
comment:6 Changed 11 years ago by
The redraw corruption on dragging in IE6 happens when bgiframe is enabled, so I'll further test that and report as a separate issue. The positioning when dragging in IE6 is fine in 1.6rc4 and trunk - it's resizing a dialog that triggers it repositioning itself downwards by the amount the page is vertically scrolled.
comment:7 Changed 11 years ago by
I think this is now working ok on all counts with jQuery UI 1.7 plus jQuery 1.3.2 - I've scrolled down a page and then both dragged and resized a dialogue in both IE6 and IE7 and there's no jumping around, so it looks to be fixed. Probably worth getting someone else to check this tho' as my testing wasn't very rigorous!
comment:8 Changed 11 years ago by
| Milestone: | TBD → 1.7 |
|---|---|
| Resolution: | → fixed |
| Status: | assigned → closed |
Seems to be working for me too. Thanks for all of your testing and comments Skaffen.
Like the original comment, under IE6 with 1.5.2 I get resizable dialogs jumping down when resized if the page they're shown on has been scrolled down at all. Dragging is fine though. At a guess the amount the dialog jumps down on resize is the same as the amount the page has been scrolled down (I'm guessing somewhere in the dialog resize code there's a page offset/viewport offset mixup)
I get the problem if I go to here and I ensure the browser window means there is a vertical scroll bar and I've scrolled down on that scroll bar: http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.dialog
So I'm guessing it's not an issue that's been addressed in trunk yet either :).