JQuery-ui dialog jumps to the bottom of page in Chrome

Question

I`m using jquery ui (jquery-ui-1.10.3) and faced some problem with dialog in Chrome.

I`m opening dialog in the following way:

$('#dialog').dialog({
    width: 400,
    buttons: {
        "save": function() { update(); $( this ).dialog( "close" ); }
    }
});

This dialog is draggable. Dialog appears perfectly, but as soon as I need to drag it, dialog goes/jumps to the bottom of a page, even under the scroll. And this happens only in Chrome.

Maybe somebody faced the same problem. Any ideas?

Thanks

Tame

Did you find a solution to this issue? I have just upgraded from Dialog 1.8.16 to Dialog 1.10.3 and am experiencing the same issue in Firefox -but not in Chrome. – Communalism

No, did not find solution yet ( Which version of Firefox and Chrome do you use? I use chrome Version 27.0.1453.116 m and Firefox and Firefox 22.0 – Tame

Apologize - have been away for some time. I'm on FF22 and Chrome 23.0.1271.95 (Linux Ubuntu). – Communalism

Answer 1

It's a bug in jQuery UI 1.10.3 - http://bugs.jqueryui.com/ticket/9315. Also could be marked as dupe of jQuery ui dialog dragging issues.

Simmers

Just read the issue - believe this is exactly what struck in my case. – Communalism

Make sure you've not overridden CSS of Jquery UI dialog with top/bottom/left/right and position:absolute. – Kurr

This was my issue in Firefox and Chrome as well. They released 1.10.4 recently and that seems to fix the issue. – Letterperfect

This issue was not fixed with the 1.10.4 release. Go to the demos page in IE8 and attempt to drag the dialog to see the bug. – Tala

I am using jqueryui 1.11.0 and have the same issue. I will give the current jquery 1.11.1 a try later on. God to know it is a bug I will not dive deeper into it. – Boondocks

still there wit 1.11.1 --- very unfortunate – Boondocks

Answer 2

This seems to fix it

html, body {position: relative}

Alroy

Answer 3

I had set the parent element's (in my case the body tag) position to static (it was relative) and it fixed the problem.

if (isChrome){ document.getElementsByTagName("body")[0].style.position = 'static'; }

Off course "isChrome" variable needs to be calculated before.

Also you have to check if this change doesn't ruins your existing layout.

Hope it helps
Andras

Scrivens

Answer 4

Tried

html, body {position: relative}

but it didn't work for me.. However, found this worked for my situation.

body { height: 100%; }

Fixes quite a few strange issues.

Crackerbarrel

Answer 5

For me jquery-ui 1.10.1 worked well. The said bug in 1.10.3 seems to be in 1.10.4 too.

Dulaney

Answer 6

It doesn't work in jQuery UI 1.10.3 even if the bug says that it's fixed. I found it fixed in: jQuery UI 1.11.2, haven't tried any version below. But all good with 1.11.2

Lajuanalake

Answer 7

try

$( "#dialog-confirm" ).dialog({position: 'center',...

solved my problem using jquery-ui-1.9.2.custom

Angloirish

Answer 8

Adding the stylesheet:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

fixed it for me

All versions and docs

Joell

Answer 9

Add relative positioning to necessary element(s):

html, body, header, nav, main, footer, article, section, summary{ position: relative; },

I added relative positioning to my body element and that solved my issue. I'm using jquery-ui-1.10.4

Intuition