JQuery UI Dialog Issue with Multiple Dialogs

Question

I have several dialogs (jquery-ui-ified), they all look something like this:

$('#options_dlg').dialog({
    modal:true,
    stack:true,
    autoOpen:false,
    resizable:false,
    title:'Options',
    height:620,
    width:520,
    zIndex:20000 
});

The issue I am experiencing is that when i have a dialog open, and then I open another dialog, or close another dialog, it re-positions the first dialog - sometimes moving it so I can no longer access the title-bar to move it around.

There are of course numerous things going on in the script that may be the culprit - although nothing that is obvious to me -- meaning, I have no code that specifies that by opening or closing a dialog, than it should relocate any other dialogs.

So my question is, has anyone experienced this before in any capacity, and/or does anyone have any insight as to what could cause this to happen -- anything at all I can use to begin tracking down the culprit would be helpful.

Thanks -

It appears this is related to jquery-ui 1.8.14. I swapped out to version 1.7.2, and the issue doesn't occur. So, I guess maybe I should submit this to jquery ui team? — OneNerd
– OneNerd, Commented Sep 24, 2011 at 18:23
what about 1.8.16? whenever i've experienced weird issues like that it is almost always because there are elements with duplicate ID's or something like that in that page. — Dave L.
– Dave L., Commented Sep 30, 2011 at 2:14

Community · Accepted Answer · 2017-05-23 10:34:29Z

2

I did have similar issues in and only in IE with jquery-ui 1.8.16. It looks like a known issue and I used the following method

$dialog.parent().css({position:"fixed"}).end().dialog('open');

from this solution and solved it. You might have a try, too.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Sep 30, 2011 at 1:53

Marshal

4,9401 gold badge25 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JewrassicPark Over a year ago

Almost 2 years later using the latest version of jquery ui and this fixed my problem exactly

Axle · Accepted Answer · 2011-10-26 21:42:45Z

0

Try setting the position of the dialog box when you open it.

$('#options_dlg').dialog({
    modal:true,
    stack:true,
    autoOpen:false,
    resizable:false,
    title:'Options',
    position: [x,y],
    height:620,
    width:520,
    zIndex:20000 
});

And before you set up the dialog, initialize x and y to be offsets depending on where you want the dialog to appear.

For example:

x = $(cell).offset().left + $(cell).outerWidth();
y = $(cell).offset().top - $(document).scrollTop();

You'll have to figure out how to determine the x and y offsets for your application, but that should fix the dialog position so that it does not move randomly when other dialogs are used.

answered Oct 26, 2011 at 21:42

Axle

1,8982 gold badges14 silver badges18 bronze badges

Collectives™ on Stack Overflow

JQuery UI Dialog Issue with Multiple Dialogs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related