Jquery UI 1.10.x Dialog drag issue on large body height

Question

In short: When You have document height > window height, scroll down and open dialog - You can not drag it in Firefox. Bug occured only in jQuery UI 1.10.x

How to reproduce:

jsfiddle:

http://jsfiddle.net/mefa/zrNNZ/15/

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Jquery UI FF dialog bug - jsFiddle demo by mefa</title>
    <script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <link href="/css/result-light.css" type="text/css" rel="stylesheet">
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
    <style type="text/css">
    html {
        font-size:12px;
    }
    body {
        height: 2000px;
    }
    </style>
    <script type="text/javascript">
    $(window).load(function(){
     $(function() {
        $( "#dialog-modal" ).dialog({
          height: 150,
          modal: true
        });
      });
    });
    </script>
</head>
<body>
<div title="Basic modal dialog" id="dialog-modal">
    <p>Drag this dialog to bottom of document in Firefox</p>
    <p>Bug only in jquery ui 1.10.x</p>
</div>
<p>Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>

Video: http://www.youtube.com/watch?v=_J8aepYHg4U

So, assume U have a Jquery UI Dialog, and tag <body> has vertical scroll (for example You have much content, big table for example). Assume Your window height is 800 px and document height is 2000 px; So U need to scroll down, to get all contents.

Then You scroll down, over the window height, for example to 1000px, open dialog. After that You can't correctly drag it into any other position, because it's jumps like a mad.

Ive recorded a demonstration, based on the original jquery ui examples, so no one can say I missed or corrupted something. Only one thing Ive changed is body css attr "height", and set it to 2000px to simulate large document.

I appreciate any advice/fix.

Here is very [simple demo of bug](http://jsfiddle.net/mefa/zrNNZ/15/). Open it in Firefox — Vladyslav Kolesov, Jun 12 '13 at 13:12

Vladyslav Kolesov · Answer 1 · 2013-08-02T13:22:41.997

5

Suddenly, Ive found a solution.

To fix this bug, You need only to add following CSS rule

.ui-dialog {
    position: fixed;
}

But this also has side effects. If part of dialog is out of window scope, then no vertical/horizontal scrollbars appeared, and You can't reach hidden part of dialog in any way. Need to wait properly fix from Jquery UI team.

edited Aug 02 '13 at 13:22

answered Jul 29 '13 at 12:16

Vladyslav Kolesov

123
1
8

sorry but my bug is alive – vuhung3990 May 22 '14 at 04:50
This isn't enough if your dialog is resizable. The resize event force inline style `position:absolute` and break this – TCHdvlp Oct 14 '14 at 14:15

score 5 · Accepted Answer · answered Jan 17 '14 at 10:51

5

this is a bug in jquery-ui version 1.10.3
You can fix this by including previous version :

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>

answered Jan 17 '14 at 10:51

Mehdi Maghrouni

1,529
22
23

Glad to see it was useful :) – Mehdi Maghrouni Feb 01 '14 at 19:25

score 3 · Answer 3 · answered Oct 16 '13 at 01:47

3

The real fix is to replace _convertPositionTo() and _generatePosition() in jquery.ui.draggable.js from those in the latest master (1.10.3 is official current release, so the fix should come out in 1.11) for those who run into it now and can't use those css hacks.

answered Oct 16 '13 at 01:47

Glebbb

356
1
8

Thanks, I just replaced _convertPositionTo and _generatePosition from 1.9.2 and it worked. – xbrady Oct 23 '13 at 15:39

score 1 · Answer 4 · answered Jun 12 '13 at 14:17

i have tried some thing for you

it is not the best but you can try it.. i hope

re place your code as

 $(function() {
   $( "#dialog-modal" ).dialog({
     height: 150,
     modal: true,
     dragStop: function( event, ui ) {           
       $( "#dialog-modal" ).dialog({ position: 'center',draggable: true });
    }

  });
});

when you up the mouse click it will stick to center of your screen... as example i have keep it at center but you can keep it any where... just go through documentation.

Jquery UI 1.10.x Dialog drag issue on large body height

4 Answers4