#3148 closed bug (fixed)

Opened July 30, 2008 06:35PM UTC

Closed March 29, 2009 04:55PM UTC

UI/Dialog: dialog teleports up/down when dragged or resized in MSIE

Reported by: javaguy@sbcglobal.net 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>
Attachments (0)
Change History (8)

Changed August 17, 2008 10:12AM UTC by Cloudream comment:1

component: ui.core → ui.dialog
milestone: → TDB
owner: paul → scott.gonzalez
priority: major → minor

Changed August 27, 2008 01:57PM UTC by Skaffen comment:2

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

Changed August 27, 2008 02:31PM UTC by Skaffen comment:3

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!

Changed September 17, 2008 11:51PM UTC by scottgonzalez comment:4

owner: scott.gonzalez → eduardo
status: new → assigned

Changed January 13, 2009 11:50AM UTC by Skaffen comment:5

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.

Changed January 13, 2009 02:46PM UTC by Skaffen comment:6

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.

Changed March 12, 2009 11:50AM UTC by Skaffen comment:7

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!

Changed March 29, 2009 04:55PM UTC by scottgonzalez comment:8

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.