Opened 14 years ago

Last modified 8 years ago

#5777 closed enhancement

popups: move/close when window resized — at Version 13

Reported by: guest Owned by: bill
Priority: high Milestone: 1.9
Component: Dijit Version: 1.0
Keywords: popup moving place Cc: ben hockey
Blocked By: Blocking:

Description (last modified by bill)

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

Change History (13)

comment:1 Changed 14 years ago by bill

Milestone: 2.0
Owner: set to bill
Summary: Popups should be placed relatively to aroundNodespopups: close when window resized

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

comment:2 Changed 14 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

comment:3 Changed 13 years ago by bill

Description: modified (diff)
Milestone: 1.31.4

comment:4 Changed 13 years ago by 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.

comment:5 Changed 13 years ago by bill

Milestone: 1.41.5

comment:6 Changed 12 years ago by Adam Peller

Milestone: 1.51.6

comment:7 Changed 12 years ago by bill

Fixing this will also fix #10875.

comment:8 Changed 12 years ago by bill

Resolution: fixed
Status: newclosed

(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.

comment:9 Changed 12 years ago by 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.

comment:10 Changed 12 years ago by 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.

comment:11 Changed 11 years ago by 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.

comment:12 Changed 11 years ago by 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.

comment:13 Changed 11 years ago by bill

Description: modified (diff)
Milestone: 1.6future
Resolution: fixed
Status: closedreopened
Summary: popups: close when window resizedpopups: move/close when window resized
Note: See TracTickets for help on using tickets.