Dropdown menus in OOjs-UI don't extend beyond dialog boxes
Closed, InvalidPublic
Actions

Assigned To

Authored By

	jhsoby
	Jun 20 2017, 9:07 AM

Description

I've been playing a bit with OOjs-UI here (permanent link in case it changes), and I found the behaviour of the dropdown box to be unexpected.

Expected behaviour: The same as the HTML <select> tag; when clicking the dropdown box, it should extend beyond the popup (dialog box) as needed. (An example of this can be seen with the autoEdit gadget on Wikidata.)

Actual behaviour: The dropdown list opens within the dialog box without even adjusting its height, so a scrollbar appears inside the dialog box. Also, probably because of height issues, only one line from the dropdown list appears at a time, and the dropdown list itself needs to be scrolled through.

Event Timeline

jhsoby created this task.Jun 20 2017, 9:07 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 20 2017, 9:07 AM

This is a limitation of the CSS model we have to work with. You can work around this by passing an $overlay config option to the DropdownWidget, allowing its dropdown to render outside of the bounding box of the dialog. See here: https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays

Does this help?

It does indeed, thank you! But why is that not the default setting?

Because we can't always automatically determine which is the right overlay. The value depends on where you're doing to insert the widget (in a dialog or not, and which dialog), and we don't know that when the widget is being created.

matmarex closed this task as Invalid.Jun 23 2017, 3:16 PM

matmarex claimed this task.

Volker_E moved this task from Backlog to Invalid/Declined/Duplicate on the OOUI board.Jun 30 2017, 11:39 AM

Dropdown menus in OOjs-UI don't extend beyond dialog boxesClosed, InvalidPublicActions

Description

Event Timeline

Dropdown menus in OOjs-UI don't extend beyond dialog boxes
Closed, InvalidPublic
Actions