Page MenuHomePhabricator

Dropdown widgets on Special:Delete only has partial OOUI styling
Closed, DuplicatePublic


I was looking at some reports where people were complaining about the whitespace on dropdowns of the Special:Delete page, when using Firefox (not Chrome or Safari, IE unknown).

I notice that it seems that these do not use the full styling for OOUI dropdowns. Possibly they are not being infused or something ?

I do agree that the styling of the native option element looks weird this way.

FF dropdown of Vector

Screen Shot 2017-07-24 at 11.42.01.png (1×1 px, 495 KB)

FF dropdown of Monobook

Screen Shot 2017-07-24 at 11.42.15.png (1×1 px, 406 KB)

'normal' OOUI DropdownInputWidget

Screen Shot 2017-07-24 at 11.50.01.png (472×1 px, 42 KB)

The styling causing this large whitespace in the native dropdowns is the 0.5em padding of this rule:

.oo-ui-dropdownInputWidget option {
    font-size: inherit;
    font-family: inherit;
    height: 1.5em;
    padding: 0.5em 1em;

See also:

Event Timeline

TheDJ added a project: Browser-Support-Firefox.
TheDJ updated the task description. (Show Details)
matmarex added subscribers: Esanders, matmarex.

It's using the PHP DropdownInputWidget, which is a regular <select> element with some funky styles. We don't "infuse" it, it seems (replace it with a JavaScript DropdownInputWidget, which is a custom design). It's one line of code to infuse it:

This is honestly good − there are some gadgets for Special:Delete that would completely break if it was turned into a custom <select>. It is the only reason the script for people deleting pages in Russian Wikipedia ( still works, for example. (Padding is still a problem, yes.)

Jdforrester-WMF edited projects, added UI-Standardization, Accessibility; removed OOUI.

The infused OOUI version should keep a hidden <select> tag with the same ID available, but some scripts will need to be updated and this is to be expected.

Infusing keeps the <select> (and hides it), but only to be compatible with the way browsers preserve the value on back/forward navigation. Changing its options or value will not be reflected in the OOjs UI widget's interface.

Volker_E renamed this task from Dropdown widgets on Special:Delete only has partial oojs ui styling to Dropdown widgets on Special:Delete only has partial OOUI styling.Jan 18 2018, 9:40 PM
Volker_E updated the task description. (Show Details)