FLUID-2650: After changing to the largest font size or line spacing, the dialog will load at the bottom of the page.

Description

After changing to the largest font size or line spacing, the dialog will load at the bottom of the page.

Steps to reproduce:

1) Open the Sakai mock-up example from the daily build site
http://build.fluidproject.org/infusion/integration-demos/sakai/html/ui-options-fss-sakai.html

2) Change to the largest font size or line spacing and save the changes

3) Re-open the UI Options dialog

Notice that the dialog opens at the bottom of the page, and is partly hidden offscreen.

Environments

FF2, FF3, Opera 9.6, Safari 3.2 (Mac OS 10.5)
Safari 3.2 (Mac OS 10.4)
FF2, FF3, IE6, IE7, IE8, Opera 9.6 (Win XP)
FF3, IE7, IE8 (Win Vista)
IE6 (Win 2000)

Attachments

• FLUID-2650.2.txt
• FLUID-2650.txt

Comments

• Laurel Williams commented 2009-05-22T11:27:27.000-0400

  http://dev.jqueryui.com/ticket/4539 - Turns out that there seems to be a problem with jQuery dialog which opens the dialog off the page when the page is long and you have to scroll to activate the dialog.

  Here is the exact description from the ticket listed above:
  f 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.

  This seems to be the problem we are experiencing.

• Laurel Williams commented 2009-05-22T11:27:57.000-0400

  See comment about jQuery above

• Laurel Williams commented 2009-05-22T13:12:41.000-0400

  Here is a patch which will temporarily solve this problem. Basically, I force the web page to scroll to the top in advance of the scroll caused by the jQuery dialog open bug. Then I open the dialog box at top left, so that it doesn't appear off screen. This is not ideal, because this positioning looks weird for normal text sizes. Ideally we would detect the 'potential' size of the dialog box and position based on that, so it only positioned top left for huge sizes.

  In addition to adding the code mentioned above, I altered code in initDialog. I removed the code which positioned the dialog via css - this code didn't seem to impact the dialog at all as it was over-ridden by a jquery dialog positioning function call taking place after it. I also removed the jquery dialog positioning call in the initDialog function, as it was over-ridden by the re-positioning that happens each time the dialog is opened.

  This patch was tested on firefox3, ie8, opera9 on windows XP

• Anastasia Cheetham commented 2009-05-25T10:46:24.000-0400

  This patch builds on the work Laurel did: The reason "center" doesn't work as a position is because the contents of the dialog hasn't been loaded yet, and the dialog has no size. I moved the sizing of the dialog into the initDialog() function, after the content has been loaded. Now the dialog is appropriately positioned. Combined with Laurel's scrollTo, it's better. There is still a bit of a mild glitch, because the dialog appears, and then resizes.

  I'm not sure if we want to apply this patch as a workaround to the jQuery bug, and then when jQuery fixes their bug, remove our workaround. The alternative is to leave the bug in place, so that the dialog appears waay down the page. Probably a call for Justin to make.

• Anastasia Cheetham commented 2009-05-25T11:08:33.000-0400

  More discussion have led to the decision to leave the behaviour as-is for now, given that the component is still in Preview, and the problem will affect a minority of users. FLUID-2764 has been filed, relating to revisiting this if/when jQuery fixes the bug.

• Jacob Farber commented 2009-05-27T11:27:51.000-0400

  We should change the anchors for the buttons to something other than a simple document fragment, so instead of writing:

  <a href="#">

  we should write

  <a href="#_bottom">

  which wont cause jumping.