Opened 10 years ago

Closed 9 years ago

#10091 closed defect (fixed)

Calendar: month drop down can get cutoff

Reported by: bill Owned by: bill
Priority: high Milestone: 1.6
Component: Dijit Version: 1.4.0b
Keywords: Cc:
Blocked By: Blocking:

Description

On Calendar, when the user opens the month drop down it's positioned such that the mouse is immediately over the currently selected month. Particularly for calendars at the top of a page, the month drop down can be cut off, appearing above the top of the viewport (especially when the currently selected month is December).

Typically we solve this by using dijit.popup, which positions the drop down either above or below the anchor node, depending on where there is space.

I can see the benefit of positioning the drop down at the currently selected value (not just for the Calendar month drop down but for menu drop downs in general), but it has the above problem that needs to be worked out. The other downside is that the behavior is non-standard for dijit.

Split off from #7987.

Change History (9)

comment:1 Changed 10 years ago by Adam Peller

Milestone: 1.51.6

comment:2 Changed 9 years ago by bill

Owner: changed from Adam Peller to bill
Status: newassigned

comment:3 Changed 9 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [22832]) Convert Calendar month drop down to DropDownButton, so that it uses standard dijit.popup.open() for placement, fixing problems where drop down renders outside of viewport.

The dropdown menu is guaranteed to be positioned completely in the viewport, even when the Calendar/DateTextBox is near the top/bottom of the viewport, assuming that the viewport is sufficienty tall. For some reason the dijit.place code refuses to put the drop down on top of the around node, even when that's the only way to fit the drop down in the viewport. May need to fix that later.

This check in also makes the month label look like a DropDownButton, which is a good thing since otherwise users won't know that they can click it, but the theme designers may want to restyle it to something more subtle.

Since dijit.popup.open() doesn't have an option to horizontally center the dropdown, I needed to remove claro's 20px left/right padding, because it makes the menu go too far to the right.

Fixes #10091 !strict.

comment:4 Changed 9 years ago by Adam Peller

Resolution: fixed
Status: closedreopened

If the date is something like December 31, 2008 (see DateTextBox?.html test, first example) Clicking on February should land you somewhere in February, arguably on the last day of the month. Instead, it selects March with no selected date.

comment:5 Changed 9 years ago by Adam Peller

also, if you edit the date inline, such as changing 12/31/2008 to 1/31/2008 in the textbox and immediately click the dropdown icon, it still brings you to the selected date in December.

comment:6 Changed 9 years ago by bill

Good catch... since date.setMonth(2) isn't sufficient to move (the focused date) from Jan 31 to Feb 28, how do I do it?

comment:7 Changed 9 years ago by Adam Peller

It may be overkill, but dojo.date.add will handle the overflow (use this.dateFuncObj.add() with an interval of "month")

comment:8 Changed 9 years ago by bill

OK, I'll use that. As per editing the date inline, such as changing 12/31/2008 to 1/31/2008 in the textbox and immediately click the dropdown icon, that's also an issue but it's unrelated to this ticket. That issue has always existed, even in 1.5.

comment:9 Changed 9 years ago by bill

Resolution: fixed
Status: reopenedclosed

(In [22886]) Fix edge case using month drop down to switch to month that doesn't contain focused day (ex: while focused on Dec 31, switch to February). Fixes #10091 again !strict.

Note: See TracTickets for help on using tickets.