Selectmenu default width is too small, causes overflow

[sandygettings]

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: ​http://adacare.com/TestSelectmenuOverflow.html

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

[Scott González]

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

[Scott González]

PR: ​https://github.com/jquery/jquery-ui/pull/1467

[Scott González]

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