Dropdown widgets on Special:Delete only has partial OOUI styling
Open, NormalPublic

Description

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

FF dropdown of Monobook

'normal' OOUI DropdownInputWidget

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: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Drop_Down_Box

TheDJ created this task.Jul 24 2017, 9:50 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 24 2017, 9:50 AM
TheDJ updated the task description. (Show Details)Jul 24 2017, 9:56 AM
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: https://www.mediawiki.org/wiki/OOjs_UI/Using_OOjs_UI_in_MediaWiki#Infusion

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptJul 24 2017, 10:36 AM
stjn added a subscriber: stjn.Jul 24 2017, 10:37 AM

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 (https://ru.wikipedia.org/wiki/MediaWiki:Deletepage.js) still works, for example. (Padding is still a problem, yes.)

Jdforrester-WMF triaged this task as Normal priority.

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 moved this task from Unsorted to OOUI on the UI-Standardization board.Aug 15 2017, 9:44 PM
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)