Page MenuHomePhabricator

DropdownInputWidget has broken width in PHP
Closed, DeclinedPublic

Description

The menu is wider than the widget, and the right border is broken.

Event Timeline

Esanders created this task.Jun 23 2017, 5:36 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 23 2017, 5:36 AM

The difference in the width looks like it could be the width of a scrollbar, so this reminds me a bit of T158744: Menu of DropdownWidget slightly off under certain circumstances.

I mentioned it to @Volker_E once and he said this is intentional / unavoidable limitation of CSS on <select> elements. I don't recall why exactly, I think it's something to do with hiding the browser native arrow on the dropdown.

Volker_E closed this task as Declined.Jun 26 2017, 11:44 PM

Yes, that's due to the custom look of the dropdown select and a known side-effect. Please see https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript/13968900#13968900
Providing a good UI while enabling old and mobile browsers sometimes results in compromises. There are dropdown menus as native OS components, which are automatically wider than the corresponding calling elements. We're not hindering its functionality, provide widest browser support possible and it's limited to PHP (non-infused) widgets only.
Therefore closing as declined.

Just tweaking the padding and image position makes it look better in Chrome & Firefox:
(set width to 100%+1px, and background position to right 1px)

which represents a vast majority of our users.

In which browsers would this technique not work?

@Esanders Can you propose a patch with that technique? That will make it easier to find out where it works or doesn't :)