Opened 4 years ago

Last modified 3 years ago

#11606 open feature

Selectmenu should have a default max height

Reported by: sandygettings Owned by:
Priority: minor Milestone: none
Component: ui.selectmenu Version: 1.11.4
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Scott González)

If you have a simple <select> control with many items (say, 40 or so), the entire select list cannot fit within a small browser window. Conveniently, the browser will automatically display a portion of the list with a scroll bar.

A selectmenu widget with the same list does not display a scroll bar; the user must scroll the entire browser window instead. This is not consistent with the default behavior of the <select> control in browsers.

A workaround is shown in the widget’s documentation by explicitly setting the selectmenu’s menuWidget height (or better still, max-height). However, this is an extra step for the developer and does not automatically adapt to browser windows of different sizes.


  1. Display the selectmenu with a default max-height similar to the simple <select> control (about 20 items).
  1. Or, display the selectmenu with a max-height that extends to the bottom of the browser window at the time the selectmenu is opened. This is especially convenient for users with larger monitors.
  1. Or (preferably), display the selectmenu with a max-height that is the greater of the two options above. This guarantees that the selectmenu displays at least a minimum number of items in small windows and can still display more items when the user has a large window.

Note that I’ve implemented #3 above using the widget’s “open” event handler. I’m happy to share this code if anyone is interested. This issue was tested with Chrome 41, Firefox 36, and IE 11.

[ large block of code removed ]

Change History (3)

comment:1 Changed 4 years ago by Scott González

Component: ui.coreui.selectmenu
Description: modified (diff)
Summary: Selectmenu with many items does not scroll like simple <select> controlSelectmenu should have a default max height

comment:2 Changed 4 years ago by Scott González

Status: newopen

Adding a default max height requires adding an icon to indicate when the menu is scrollable to address usability issues on devices like an iPhone where the scrollability isn't obvious. To address this, we'll add a class when the menu is scrollable and insert an arrow icon at the bottom.

Note: See TracTickets for help on using tickets.