Page MenuHomePhabricator

DropdownWidget overlaps popup
Closed, ResolvedPublic


Screenshot from :

overlap.png (201×465 px, 11 KB)

The DropdownWidget overlaps the popup.

Event Timeline

I updated the demo — P4786 — and wasn't able to reproduce the problem there:

Screen Shot 2017-01-24 at 3.26.50 PM.png (159×942 px, 38 KB)

It could be the order of adding those widgets on Special:APISandbox. @Schnark, are you seeing this anywhere else?

Volker_E triaged this task as Lowest priority.Jan 27 2017, 4:08 AM

@Volker_E, from MediaWiki-extensions-ApiSandbox (not an extension anymore, I guess) perspective this might not be Lowest priority.

@Prtksxna I've changed to lowest while we're waiting to hear back from @Schnark after you've tried to ans couldn't reproduce it

Well, all I can say that the issue does show reproducibly on Special:APISandbox, in any wiki (so it can't be some local CSS causing this), and any browser.

It's because of the position:relative; of .oo-ui-dropdownWidget. Not sure exactly how that influences stacking order (stacking order is not something I've had to deal with much).

This only happens when the PopupButtonWidget is inside a ButtonGroupWidget. ButtonGroupWidget creates a new stacking context (with z-index: 0), so that we can change z-index of buttons inside (to cancel out the duplicate borders between items in a fancy way) – but this also causes PopupButtonWidget's popup (which has z-index: 1, and which would normally appear on top) not to be able to escape this stacking context and display below subsequent positioned elements (like DropdownInputWidget's handle).

matmarex edited projects, added MediaWiki-Special-pages, MediaWiki-Action-API; removed OOUI.
matmarex added a subscriber: Anomie.

I don't think this is fixable in OOjs UI without potentially causing more complicated problems elsewhere. ApiSandbox can easily work around this by passing $overlay to the PopupButtonWidget (it's a recent feature, see d21cf8a3e8cc3961333e5d6c7737ca23c9a081e5).

Change 341049 had a related patch set uploaded (by matmarex):
[mediawiki/core] mw.special.apisandbox: Pass $overlay to PopupButtonWidgets to fix overlaps

Hmm, apparently this only happens with Vector. Monobook is fine.

Yeah, only the MediaWiki theme of OOjs UI. We don't have the fancy duplicate-button-border-cancelling in the Apex theme.

@matmarex Clarifying question, what do you mean by “fancy duplicate-button-border-cancelling”?

Change 341049 merged by jenkins-bot:
[mediawiki/core] mw.special.apisandbox: Pass $overlay to PopupButtonWidgets to fix overlaps

@matmarex Clarifying question, what do you mean by “fancy duplicate-button-border-cancelling”?

Buttons in ButtonGroupWidget share the inner borders. The border between two buttons actually belongs to the second button (the right one, in LTR).

The fancy part is: because the border colors differ in MediaWiki theme, and because some are more important than others, we sometimes want some buttons to take over both sides of the border.

Consider this example (you can copy-paste into browser console on the demo page):

var group = new OO.ui.ButtonGroupWidget( {
	items: [
		new OO.ui.ButtonWidget( {
			label: 'One'
		} ),
		new OO.ui.ToggleButtonWidget( {
			value: true,
			label: 'Two'
		} ),
		new OO.ui.ButtonWidget( {
			label: 'Three'
		} ),
		new OO.ui.ButtonWidget( {
			disabled: true,
			label: 'Four'
		} ),
		new OO.ui.ButtonWidget( {
			label: 'Five'
		} ),
		new OO.ui.ButtonWidget( {
			// Click this button to focus it
			label: 'Six'
		} ),
		new OO.ui.ButtonWidget( {
			label: 'Seven'
		} )
} );
$( 'body' ).empty().append( group.$element );

At 3x zoom:

pasted_file (129×1 px, 6 KB)

Note how the toggled button ("Two") and the focussed button ("Six") take over the border on both sides to set their color. Note how the disabled button ("Four") does not take over the border on either side, allowing other buttons to set its color. This is done with z-indices:

.theme-oo-ui-buttonGroupWidget () {
	// Create a stacking context, so that we can use `z-index` below without leaking out
	z-index: 0;
	position: relative;
	// Give hovered/focussed/active buttons higher `z-index`, so that borders display right.
	// Identical to .theme-oo-ui-buttonSelectWidget, except for the `:focus` selector.
	&.oo-ui-widget-enabled {
		.oo-ui-buttonElement {
			&.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
			&.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
				z-index: 1;

			&.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
				z-index: 2;

			&.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
				z-index: 3;

			&.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
				z-index: -1;