Skip to main content

Search and Top Navigation

#4539 closed bug (worksforme)

Opened May 18, 2009 08:24PM UTC

Closed July 21, 2010 12:26PM UTC

Last modified August 29, 2011 09:22AM UTC

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 April 10, 2010 07:32PM UTC.

    Slightly modified demo example of modal-message.html

Change History (17)

Changed May 19, 2009 10:34AM UTC by jzaefferer comment:1

milestone: TBD1.8

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

Changed May 19, 2009 03:36PM UTC by rustyduckpa comment:2

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.

Changed July 03, 2009 07:41PM UTC by danieljewell comment:3

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.

Changed July 03, 2009 07:42PM UTC by danieljewell comment:4

For a clearer example:

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

$.scrollTo(0, 0);

$('#dialog').dialog('open');

});

Changed July 09, 2009 03:13AM UTC by scottgonzalez comment:5

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.

Changed September 10, 2009 10:37AM UTC by samb comment:6

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?

Changed October 09, 2009 03:29AM UTC by bzouchir comment:7

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.

Changed December 07, 2009 09:36PM UTC by CliftonH comment:8

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 April 10, 2010 07:38PM UTC by ThinkerR comment:9

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.

Changed May 13, 2010 09:53PM UTC by amithgeorge comment:10

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.

Changed July 21, 2010 08:03AM UTC by lance comment:11

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!

Changed July 21, 2010 12:26PM UTC by scottgonzalez comment:12

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.

Changed December 20, 2010 03:40AM UTC by rperetti comment:13

_comment0: In my specific case the problem was in css. Removing the following fixed the issue: \ \ html,body { \ overflow: auto; \ }1292855423400255

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)

Changed December 20, 2010 03:42AM UTC by scottgonzalez comment:14

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

Changed March 31, 2011 09:47PM UTC by rontgoff@gmail.com comment:15

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.

Changed April 21, 2011 12:22AM UTC by turya comment:16

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.

Changed August 29, 2011 09:22AM UTC by marcosgdf comment:17

_comment0: I'm having this problem under Firefox 5.01314609805863401

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