popups: move/close when window resized

[guest]

I guess the problem is related to ticket #5776.

Some of the widgets use dijit.popup to show some content attached to the widget, e.g. TimeTextBox shows _TimePicker. When you have the content of the page centered (or right-aligned I guess) resizing the browser window make all the page elements move. But the popups do not move, since they are positioned with:

// In dijit/base/_place.js:155-156 you can read:
node.style.left = best.x + "px";
node.style.top = best.y + "px";

In my opinion they should be somehow sticked to the parent widget, so that they move when the parents move.

Maybe some trick with position:relative would do the job?

Regards, Grzegorz Olędzki

[bill]

I'd just like to close the popups when the window is resized. See also #4600.

[alex]

Milestone 2.0 deleted

[bill]

I've been experimenting and deliberating over this.

I'm starting to feel uneasy about just closing a popup on resize, as that may be bad for the user, especially if it's a dialog-esque popup and they've typed some data into it.

However, it's hard to reposition the popup for a number of reasons:

1. Resizing the viewport may actually make the aroundNode go off screen. This can be for simple cases like a page with a long form, or when there are multiple scrollbars like the ComboBox inside of a BorderContainer pane in themeTester.html
2. when you open a popup, the popup API tells the caller where the popup was positioned (top/bottom/left/right). There's no API to notify the caller that the popup was moved.
3. sizing: ComboBox typically has a tall drop-down which it resizes (thus adding a scrollbar) when there isn't room to put the whole thing in the viewport. Resizing the browser window means that the drop down needs to be resized too, but there's no API to relay that to the ComboBox code.

[bill]

Fixing this will also fix #10875.

[bill]

(In [22546]) Close popups when browser window is resized/scrolled, or when a nested div (ex: pane in a BorderContainer) is scrolled. Fixes #5777, #10547, #10875 !strict.

[bill]

(In [22752]) Ignore spurious resize events that occur on IE. The spurious resize events were causing Menu_mouse.html etc. to prematurely close the menu, but only when run from the test suite (via runTests.html), not when run stand alone from Menu_mouse.html. Refs #5777 !strict.

[bill]

(In [22761]) Temporary fix to ignore spurious onscroll events that occur on IE. The spurious onscroll events were causing Select.html plus ComboBox tests to prematurely close the drop down.

This check in does not completely fix the Select.html test problem since that test has a Select with a tall drop down (taller than the viewport) which causes the whole page to scroll when one of the elements gets focused. That will be fixed in #10631.

Refs #5777 !strict.

[bill]

(In [23812]) Don't close popup when the scrollwheel is turned over the popup, in order to scroll the popup. Fixes #12297, refs #5777 !strict.

[bill]

(In [23866]) Changes related to closing/repositioning popups on scroll / resize:

• Rollback (erase) code to close popups on window resize (refs #5777, fixes #12317) and mouse wheel (refs #12297).

• When possible, don't close popups when the browser window is scrolled using the mouse on the browser scroll bar. Popups still close by clicking anywhere else on the page, including inner scrollbars. Unfortunately on IE6 & 7, clicking the browser scrollbar also still causes popups to close.

• In RTL mode, make place.js set popup.style.right rather than popup.style.left, so that on screen resize (at least in the common case) the popup and the aroundNode stay aligned. (refs #10875)

Background:

• It's often harmful that resizing a window closes the popup; the user may be expanding the window to see all of the popup. Although resizing can cause a reflow, separating the aroundNode from the popup, but often it doesn't. The case of centered/right-aligned elements mentioned in #5777 is an exception.

• Closing popups on scroll is also questionable. Scrolling the main window will scroll the aroundNode and the popup together, so it's counterproductive to close the popup. OTOH, scrolling a <div> will separate the aroundNode from the popup. And for a mousewheel event it's hard to tell whether it's affecting the main window or a nested <div>.

In the future, I'll add code to actually reposition popups when a browser window resize or a scroll has caused the aroundNode to move.

!strict.