Page MenuHomePhabricator

OOjs UI adds additional padding from <option> to selects in Firefox 57
Closed, DuplicatePublic

Description

Don’t really know what else to say, the interface looks like this right now:


https://i.imgur.com/9O1HLDb.png

Padding and height from the <option> appears to impact the padding that is set before for <select>. Padding from <option> does not affect the browser styling of a dropdown in Firefox in any way. The easiest way to fix would be to get rid of additional padding and height settings on these elements.

Event Timeline

stjn created this task.Nov 23 2017, 5:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 23 2017, 5:37 PM
stjn renamed this task from OOjs UI adds additional padding from <option> to selects on Firefox 57 to OOjs UI adds additional padding from <option> to selects in Firefox 57.Nov 23 2017, 5:41 PM
stjn updated the task description. (Show Details)
matmarex updated the task description. (Show Details)Nov 23 2017, 5:52 PM
matmarex added a subscriber: matmarex.

Just to confirm, you do not see the issue on https://doc.wikimedia.org/oojs-ui/master/demos/demos.php (search for "Dropdown")? We fixed this recently but the fix is not live on Wikimedia wikis yet.

stjn added a comment.Nov 23 2017, 5:56 PM

Just to confirm, you do not see the issue on https://doc.wikimedia.org/oojs-ui/master/demos/demos.php (search for "Dropdown")? We fixed this recently but the fix is not live on Wikimedia wikis yet.

Yes, although the focus state looks pretty bad (note: the light blue background is because of my personal styling for Wikimedia sites):

The broken focus border on the right side is ugly but unavoidable, or at least we didn't find a way to avoid it. It's caused by the trick we use to replace the dropdown arrow icon with our own.

Base added a subscriber: Base.Nov 25 2017, 5:49 AM

It's caused by the trick we use to replace the dropdown arrow icon with our own.

Am I the only one for whom this hints an obvious solution?