Page MenuHomePhabricator

OOUI DropdownInputWidget should allow automatically sizing based on width of options
Open, NormalPublic


Right now OOUI DropdownInputWidget is using a fixed width, making it appear really wide. It would be nice if it could automatically size itself based on the width of the options like a normal <select> input.

Event Timeline

Legoktm created this task.May 18 2015, 7:32 PM
Legoktm raised the priority of this task from to Needs Triage.
Legoktm updated the task description. (Show Details)
Legoktm added a project: OOUI.
Legoktm added a subscriber: Legoktm.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 18 2015, 7:32 PM
Jdforrester-WMF triaged this task as Normal priority.May 30 2015, 7:36 PM
Jdforrester-WMF set Security to None.
matmarex added a subscriber: matmarex.

T195257 implemented this for the dropdown menu, which will now expand to avoid clipping long items (fixing @Quiddity's issue), but not the dropdown handle (which still uses fixed width).

Volker_E closed this task as Declined.May 31 2018, 2:53 PM
Volker_E added a subscriber: Volker_E.

Declining the “as small as necessary” part of the task for now. The, from UX perspective, more problematic issue of cut-off elements is resolved as @matmarex stated.
For the other request, Design has settled on this appearance and we are neither planning to do because there hasn't been a clear problem statement of why this should be changed. We're also going for an available width on inputs with a set max-width, so the dropdowns are are not a singular element here.

Volker_E reopened this task as Open.EditedNov 12 2018, 1:08 AM

Re-opening this as new take on T117749, that made me think about this again.
The dropdowns there are indeed overly long. We could

  • use display: inline-block as general rule to make them always only current selected option wide, negative outcome here is that the width changes with each different selected option and might get very small with a short option or
  • add a config option to enable inline-block on per product owner selection

It would definitely be an acceptable fit on the second of the dropdowns in case given above:

Volker_E renamed this task from OOUI\DropdownInputWidget should allow automatically sizing based on width of options to OOUI DropdownInputWidget should allow automatically sizing based on width of options.Feb 5 2019, 7:49 PM
Volker_E updated the task description. (Show Details)
Volker_E added a comment.EditedFeb 5 2019, 8:00 PM

We've got two options here.
Auto-size based on current value:

Auto-size based on current value with a min-width applied (exemplified 10em):

First one has got the disadvantages to change width depending on value selected already on very small textual variants{F28128463} and it looks less clean, therefore preferring variant 1.

From a technical perspective we could add it as an optional key to the widget, like display with values block (default and current default)/inlineBlock?!