Page MenuHomePhabricator

Allow dropdown menus to autosize to larger than their handles
Closed, ResolvedPublic

Description

Dropdowns currently fix their size to the width of the handle

image.png (178×160 px, 6 KB)

This is consistent with native dropdowns (<select>), but when the labels are longer than the handle, we start clipping:

image.png (173×160 px, 6 KB)

whereas a native dropdown would expand the menu until you run of of screen space, similar to how our PopupToolGroups work:

image.png (249×240 px, 13 KB)

On limited canvas:

BeforeAfter
image.png (490×790 px, 47 KB)
image.png (482×764 px, 45 KB)

Event Timeline

Change 434360 had a related patch set uploaded (by Esanders; owner: Esanders):
[oojs/ui@master] Allow dropdown menus to be larger than their handles

https://gerrit.wikimedia.org/r/434360

With this fixed, an extended dropdown could be the solution to T178387. Also some users are already going to great lengths to mimic this behaviour (https://phabricator.wikimedia.org/diffusion/ECTX/browse/master/modules/ui/widgets/mw.cx.ui.PersonalMenuWidget.js)

As mentioned on the patch, the idea seems reasonable and good. One limit should be “smartphone” max-width of 320 px and then be cut off with 'ellipsis'
We shouldn't run into issue of one overlength item stretching a menu to 500 pixels.

ClippableElement handles all that for us.

In a perfect world, clippable would provide same distance left and right, but it's definitely an improvement (see before/after screens in task)

Volker_E assigned this task to Esanders.
Volker_E triaged this task as Medium priority.
Volker_E moved this task from Reviewing to OOUI-0.27.1 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.27.1); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

Change 434360 merged by jenkins-bot:
[oojs/ui@master] MenuSelectWidget: Allow dropdown menus to be larger than their handles

https://gerrit.wikimedia.org/r/434360

This will help in nasty combos like

image.png (1×1 px, 129 KB)
. Great.

Vvjjkkii renamed this task from Allow dropdown menus to autosize to larger than their handles to ijcaaaaaaa.Jul 1 2018, 1:08 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed Esanders as the assignee of this task.
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from ijcaaaaaaa to Allow dropdown menus to autosize to larger than their handles.Jul 2 2018, 4:43 AM
CommunityTechBot closed this task as Resolved.
CommunityTechBot assigned this task to Esanders.
CommunityTechBot lowered the priority of this task from High to Medium.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.