Opened 10 years ago

Closed 6 years ago

Last modified 4 years ago

#10631 closed enhancement (fixed)

Menu: add scrollbar if necessary

Reported by: MartinPacker Owned by: bill
Priority: low Milestone: 1.9
Component: Dijit Version: 1.4.0
Keywords: TabContainer a11y Cc:
Blocked By: Blocking:

Description (last modified by bill)

In my application I often have enough tabs in a TabContainer to make the drop-down tab list unable to scroll to ones towards the end.

It would be nice to be able to scroll the list by (for example) moving down the list until I reach the bottom one which would trigger scrolling.

I don't know what the tab list is built on so it might not be possible to make it scroll. (Indeed the widget it's built on might ought to take the code change instead.)

Change History (18)

comment:1 Changed 9 years ago by bill

Description: modified (diff)
Milestone: tbd1.6
Owner: set to bill
Status: newassigned
Summary: TabContainer: TabContainer drop-down tab list doesn't scrollMenu: add scrollbar if necessary

This is really an issue for all Menus, not just the TabContainer one. Actually I've recently added code to _HasDropDown (the maxHeight: -1 setting) to add a scrollbar when needed, so that could be used for TabContainer. The scrolling tab controller menu button should be changed to extend DropDownButton, or at least _HasDropDown. But probably that scrollbar code should be in dijit.popup.open() itself so that it can apply to (for example) context menus.

comment:2 Changed 9 years ago by MartinPacker

I nosed through the TabContainer? / TabController? code on vacation (and that of StackContainer? / StackController? FWIW) and wondered why we do it the way we do.

Need any help in this area?

comment:3 Changed 9 years ago by bill

Not sure what you mean by "do it the way we do" as that's a very general statement. Anyway, I am working on this but it's complicated since scrollbar cannot be added directly to <table> nodes, so we add it outside the <table> node but still need to get the _HasDropDown width adjustment to work correctly.

comment:4 Changed 9 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:5 Changed 8 years ago by bill

Milestone: 1.6future

comment:6 Changed 6 years ago by bill

#4793 is a duplicate of this ticket.

comment:7 Changed 6 years ago by bill

Milestone: future1.9

comment:8 Changed 6 years ago by bill

Resolution: fixed
Status: assignedclosed

In [31001]:

Make dijit/popup limit height (and add scrollbar) on the wrapper <div>, in order to fit popup in viewport. Previously this functionality was in _HasDropDown, which was adding a scrollbar on the popup itself, but that doesn't work for Menus because they are <table>'s, and <table>'s can't have scrollbars. The alternate approach would be to add wrapper <div>'s to all Menu's, like SelectMenu used to do before this check in.

A complication from putting the scrollbar on the wrapper <div> was that I needed to add code to move the border from the popup widget to the wrapper, so that the scrollbar is inside the border.

Simplified SelectMenu class to not create an extra <div>; it's no longer needed. Note that SelectMenu is still overcomplicated: there's no need for a <table> when you only have one column.

Finally, to avoid the "double border problem" where the popup meets the aroundNode, changed dijit/place to adjust the popup and aroundNode border to overlap, assuming both have borders. Previously the double border was handled for drop down Menus in claro with a margin: -1px setting on the Menu. But that technique no longer works. Also, the double border problem wasn't being handled in other cases, like other themes and the drop down ColorPalette in test_Button.html.

Fixes #10631 !strict.

comment:9 Changed 6 years ago by bill

In [31010]:

Avoid getting scrollbar on Calendar drop down, refs #10631 !strict.

comment:10 Changed 6 years ago by bill

In [31011]:

rearrange how height setting on drop down is cleared, refs #10631 !strict

comment:11 Changed 6 years ago by bill

In [31014]:

remove unused dependency, refs #10631 !strict.

comment:12 Changed 6 years ago by bill

In [31097]:

Remove overzealous code that was causing dropdowns to be misaligned with their anchor nodes. For above/below dropdown we want to account for width of top and bottom borders, but not adjust for left/right borders. Before/after popups aren't important enough to adjust for at all.

Also tweak Tooltip template so that dijit/place doesn't take the tooltip's border into account when positioning the tooltip. Since the border isn't adjacent to the around node, it's not relevant to the calculations.


Finally, fix typos where the border adjustment code was adjusting aroundNodePos.t instead of aroundNodePos.y. Fixes failures on IE10 in Tooltip-placement.html.


Refs #10631 !strict.

comment:13 Changed 6 years ago by bill

#17051 is a duplicate of this ticket.

comment:14 Changed 6 years ago by Bill Keese <bill@…>

In 2365cccb927af7b7f8f6c9613ba95f47ee0cdc1e/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:15 Changed 6 years ago by Bill Keese <bill@…>

In 447776aecc71c7d77c0497de07b14a39936f1232/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:16 Changed 4 years ago by Bill Keese <bill@…>

In 1ab27cefdce2ddd2f386dcfd7bba1a8dc6163cc7/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:17 Changed 4 years ago by Bill Keese <bill@…>

In b939f6e2167bb1d4fbb8443e58a0fea2b998868c/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:18 Changed 4 years ago by Bill Keese <bill@…>

In a6a3ad29f49f6ce0c7bf657b6d7d4ea1ed310745/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 
Note: See TracTickets for help on using tickets.