Opened 12 years ago

Closed 12 years ago

#3148 closed bug (fixed)

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

Reported by: javaguy@… 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 Cloudream

Component: ui.coreui.dialog
Milestone: TDB
Owner: changed from paul to scott.gonzalez
Priority: majorminor

comment:2 Changed 12 years ago by 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 :).

comment:3 Changed 12 years ago by Skaffen

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 Scott González

Owner: changed from scott.gonzalez to eduardo
Status: newassigned

comment:5 Changed 12 years ago by Skaffen

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 in reply to:  5 Changed 12 years ago by Skaffen

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 12 years ago by Skaffen

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 12 years ago by Scott González

Milestone: TBD1.7
Resolution: fixed
Status: assignedclosed

Seems to be working for me too. Thanks for all of your testing and comments Skaffen.

Note: See TracTickets for help on using tickets.