Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#11198 closed bug (fixed)

Selectmenu default width is too small, causes overflow

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


By default, the width of a selectmenu is based on the native select element. However, the widget adds a small triangle icon on the right side of the button. This makes the selectmenu button too narrow for the selected item’s text and causes the text to overflow (which is displayed with ellipses).

The programmer can specify a fixed width to avoid this problem. However, when unknown data are displayed in the selectmenu (for example, from a database query), a fixed width may not be a good solution.

The widget should increase the default width to allow for both the text and the triangle icon.

A sample demonstrating the problem is available here:

Change History (5)

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

The styling (font size, etc.) is also very different. The default behavior is to fill the existing space that was being occupied so as not to change the flow of surrounding elements.

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

Status: newopen

The team has decided to change the default behavior, but has not yet agreed on what that behavior should be.

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

Resolution: fixed
Status: openclosed

Selectmenu: Support width: false and default to 14em

width: null still matches the width of the original element. width: false prevents an inline style from being set for the width. This makes it easy to set the width via a stylesheet and allows the use of any unit for setting the width, such as the new default of 14em.

Fixes #11198 Closes gh-1467

Changeset: af4c35df9d1cf4c15d57b3789711026360785831

comment:5 Changed 8 years ago by Scott González

Milestone: none1.12.0
Note: See TracTickets for help on using tickets.