Page MenuHomePhabricator

DropdownWidget overlaps popup
Closed, ResolvedPublic

Description

Screenshot from https://de.wikipedia.org/wiki/Spezial:ApiSandbox :

The DropdownWidget overlaps the popup.

Event Timeline

Schnark created this task.Jan 23 2017, 11:01 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 23 2017, 11:01 AM

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


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

Prtksxna updated the task description. (Show Details)Jan 24 2017, 10:01 AM
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.

TheDJ added a subscriber: TheDJ.Jan 27 2017, 8:26 AM

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 claimed this task.Mar 3 2017, 8:59 PM
matmarex edited projects, added MediaWiki-Special-pages, MediaWiki-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

https://gerrit.wikimedia.org/r/341049

BeforeAfter
Anomie added a comment.Mar 3 2017, 9:08 PM

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

https://gerrit.wikimedia.org/r/341049

@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:

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:

/src/themes/mediawiki/widgets.less
.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;
			}
		}
	}
...
}
matmarex closed this task as Resolved.Mar 3 2017, 10:42 PM
matmarex removed a project: Patch-For-Review.