Opened 10 years ago

Closed 8 years ago

Last modified 7 years ago

#4539 closed bug (worksforme)

Modal Dialog Opening Offscreen After Scrolling Browser Window

Reported by: rustyduckpa Owned by:
Priority: critical Milestone: 1.8
Component: ui.dialog Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:

Description

I am using the following code in the onclick event of an anchor to open a modal dialog:

function addNote(errID) {

$('#addNoteDialog #noteText').text(errID); $('#addNoteDialog').dialog('open');

}

The code to set up the addNoteDialog is:

$("#addNoteDialog").dialog({

bgiframe: true, autoOpen: false, height: 300, title: 'Add Note', position: 'center', closeOnEscape: true, dialogClass: 'dialog', buttons: {

"Cancel": function() { $(this).dialog('close'); } , "Save": function() { $(this).dialog('close'); }

}, modal: true

});

If my content is tall and I scroll the browser window to the bottom to reach the link to which my function is attached, ".dialog('open')" causes the browser window to scroll back to the top, and the modal dialog will open completely offscreen (outside the viewport) near the link. The modal dialog will open correctly in the center of the viewport if I do not have to scroll the browser window. It will sometimes open with the title bar and a sliver of the dialog showing at the bottom of the browser window if I have scrolled the browser window slightly.

Working on Windows XP, IE 7, Firefox 3.0.10.

Attachments (1)

modal-message.html (3.2 KB) - added by ThinkerR 9 years ago.
Slightly modified demo example of modal-message.html

Download all attachments as: .zip

Change History (18)

comment:1 Changed 10 years ago by Jörn Zaefferer

Milestone: TBD1.8

Sounds like position: 'center' doesn't take scroll position into account.

comment:2 Changed 10 years ago by rustyduckpa

Please note that the behavior occurs regardless of the position option. It appears that calling .dialog('open') causes the viewport of the browser window to scroll to the top of the page. The dialog appears in the correct position in the former viewport (i.e., if I scroll the window back down to where it was before the call, the dialog is visible in the correct location). So it appears to be calculating the position correctly -- just that the browser window has been scrolled first so that the dialog is displayed outside of the viewport. Hope that description makes sense.

comment:3 Changed 9 years ago by danieljewell

I found a workaround to this issue (as it was affecting me too)... It's not *that* pretty, but it works.

Install http://plugins.jquery.com/project/ScrollTo (the ScrollTo plugin). Before you issue a $(...).dialog('open') command, run: $.scrollTo(0,0);

This will scroll the browser window to the top left and will make the modal dialog appear correctly. It jumps around a little bit, so it's not *that* pretty... But it works.

Tested on FF 3.5 & IE8.

comment:4 Changed 9 years ago by danieljewell

For a clearer example:

$("#dialogLink").click(function (e) {

$.scrollTo(0, 0); $('#dialog').dialog('open');

});

comment:5 Changed 9 years ago by Scott González

Resolution: worksforme
Status: newclosed

I can't reproduce the viewport scrolling problem. Tested in Firefox 3, Safari 3, Opera 9, IE 6. Please attach a test page and say which browser you're having problems with.

comment:6 Changed 9 years ago by samb

Hi!

I've got the same problem.

You can reproduce it when using '<a href="#" onclick="$('#detail_0').dialog('open')">Show detail 0</a>' instead of a button, in a tall enough table to have to scroll.

Happens with Firefox 3.0, Chrome 2.0, IE 8.0

ps : Is it possible to reopen this ticket?

comment:7 Changed 9 years ago by bzouchir

This happening because when using a link (a tag) href='#' causes the window to redraw, which resets the scroll bars.

Been looking for a solution as well and found this ticket.

Not to mess with jQuery code, a solution to this problem would be to bind a handler to the click event of the link.

<a href='#' id='btn'>My Button</a>

in javascript write: $(function(){

$('#btn').bind('click', handleButton);

});

function handleButton(event){

event.preventDefault(); This will prevent the unwanted redraw behavior, as if no link is clicked.

Then init your dialog $(#dialogDiv).dialog();

}

Besides that this is best practice, by not including any logic in your html, it also solves the above problem.

hope that helps.

comment:8 Changed 9 years ago by CliftonH

If you are using an anchor tag to open the dialog box, just place a return false; inside of your function.

$('a').click(function(){
    $('.dialog-box').dialog('open');
    return false;
});

Changed 9 years ago by ThinkerR

Attachment: modal-message.html added

Slightly modified demo example of modal-message.html

comment:9 Changed 9 years ago by ThinkerR

I've attached a slightly modified demo example of modal-message.html.

To reproduce the viewport problem, type the url modal-message.html#anchor in Chrome 5.0.342.9 beta for Ubuntu.

comment:10 Changed 9 years ago by amithgeorge

Resolution: worksforme
Status: closedreopened

the problem does exist. i had to calculate the current position of the windows scroll using $("html").scrollTop() before the creating the dialog. In the open function of the dialog, the statement is to restore the scroll value i had calculated previously. this way, the user doesnt perceive any "jump" to the bottom of the page.

comment:11 Changed 8 years ago by lance

Any progress on this ticket? It has become somewhat of a show-stopper.

I can confirm that it has nothing to with "anchor tag to open the dialog box".
The browser does not jump all the way to the top.
The dialog window appears in the correct position.
The problem is with the browser scrolling on dialog open.

Could some please provide some sort of feedback?

Thanks guys!

comment:12 Changed 8 years ago by Scott González

Resolution: worksforme
Status: reopenedclosed

We still haven't seen a page that shows this problem. The page posted by ThinkrR is invalid because browsers don't scroll to anchors until after the dialog is visible.

comment:13 Changed 8 years ago by rperetti

In my specific case the problem was in css. Removing the following fixed the issue:

html,body {

overflow: auto;

}

(just documenting in case someone else is running into this issue)

Last edited 8 years ago by rperetti (previous) (diff)

comment:14 Changed 8 years ago by Scott González

We don't support specifying any dimension-related styles on html or body.

comment:15 Changed 8 years ago by rontgoff@…

This will fix the issue

after the open:function(){

set the ui-dialog class to the top $('.ui-dialog').css("top","0px");

I noticed that ui-dialog was being set with the number of pixels I scrolled down.

comment:16 Changed 8 years ago by turya

This is still broken.

I believe it is actually caused by the focus call towards the end of the open function (in my copy line 6165).

    $(self.element.find(':tabbable').get().concat(
       uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
          uiDialog.get()))).eq(0).focus();

This gets called when the dialog is first added. I tried to create a test case, but after lots of futzing around in firefox I've found the state of the uiDialog is inconsistent depending on where I set my breakpoints and step through the code. I think there may be a timing issue. Sometimes the position is 0,0, and sometimes it is in the expected position.

I believe that there is probably an asynchronous component to the jquery position call, and that perhaps on very complex pages the lag is enough that calls are being made out of the expected order. Wrapping the focus call in a setTimeout() fixes the problem, which lends credence to that idea.

        setTimeout(function() {
    		$(self.element.find(':tabbable').get().concat(
	    		uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
		    		uiDialog.get()))).eq(0).focus();
        }, 200);

Perhaps you could introduce something similar into the next version for those of us plagued by this problem.

comment:17 Changed 7 years ago by marcosgdf

I'm having this problem under Firefox 5.0 but not under Safari/Chrome

Last edited 7 years ago by marcosgdf (previous) (diff)
Note: See TracTickets for help on using tickets.