OOjs UI produces an unnecessary margin at Special:Search
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	stjn
	Feb 23 2017, 2:38 PM

Description

Relatively new form using OOjs which was introduced at Special:Search has a one major bug in it: there’s a 1em top margin in .oo-ui-fieldlayout which moves MW message search-showingresults higher than it should be.

Either that margin should be added to .results-info class or it should be deleted (personally I’m in favour of the latter).

Compare:

https://en.wikipedia.org/w/index.php?search=Russia&title=Special:Search&fulltext=1 (default, with margin)
https://ru.wikipedia.org/w/index.php?search=Russia&title=Special:Search&fulltext=1&uselang=en (without margin)

Temporary fix made in Russian Wikipedia: https://ru.wikipedia.org/?diff=83849414&oldid=83801619

CSS code in question:

.oo-ui-fieldLayout {
    display: block;
    margin-top: 1.640625em;
}

Details

	Subject	Repo	Branch	Lines +/-
	SearchFormWidget: Move hidden fields below the ActionFieldLayout	mediawiki/core	master	+8 -5

Customize query in gerrit

Event Timeline

stjn created this task.Feb 23 2017, 2:38 PM

Restricted Application added projects: Discovery-ARCHIVED, Discovery-Search. · View Herald TranscriptFeb 23 2017, 2:38 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Jack_who_built_the_house subscribed.Feb 23 2017, 2:40 PM

Screenshots for future reference:

The CSS for .oo-ui-fieldLayout is supposed to be overridden with:

.oo-ui-fieldLayout:first-child, (…) {
    margin-top: 0;
}

Basically, together, this is meant to add the margin between FieldLayouts, but not to the first one.

On Special:Search currently, however, there are hidden fields before the FieldLayout, which cause this not to work correctly:

These can probably easily be moved somewhere else (we usually put such fields just before </form>), which will resolve the problem. Or if not, Special:Search should have a CSS override much like the one in the ruwiki workaround.

I don't think this is an OOjs UI bug.

In T158856#3050056, @matmarex wrote:
The CSS for .oo-ui-fieldLayout is supposed to be overridden with:
.oo-ui-fieldLayout:first-child, (…) {
    margin-top: 0;
}
Basically, together, this is meant to add the margin between FieldLayouts, but not to the first one.

...

You could probably consider to add :first-of-type for newer browsers instead of :first-child to avoid such issues altogether (of course, if classes such as .oo-ui-fieldLayout are supposed to be just <div>s and nothing else).

Should be supported since IE9: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

Still, I personally would be content with any change fixing this across Wikimedia projects.

FieldLayouts can be freely mixed with other layouts (or plain HTML), so I think that could result in more confusing behavior.

Change 339443 had a related patch set uploaded (by Bartosz Dziewoński):
SearchFormWidget: Move hidden fields below the ActionFieldLayout

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

gerritbot added a project: Patch-For-Review.Feb 23 2017, 5:04 PM

Change 339443 merged by jenkins-bot:
SearchFormWidget: Move hidden fields below the ActionFieldLayout

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

ReleaseTaggerBot added projects: MW-1.29-release (WMF-deploy-2017-02-28_(1.29.0-wmf.14)), MW-1.29-release-notes.Feb 23 2017, 7:00 PM

The change will be deployed to Wikimedia wikis next week, 28 February – 2 March, per https://www.mediawiki.org/wiki/MediaWiki_1.29/Roadmap.

	F5793993: pasted_file
	Feb 23 2017, 4:45 PM

	F5793898: pasted_file
	Feb 23 2017, 4:35 PM

	F5793893: pasted_file
	Feb 23 2017, 4:35 PM

OOjs UI produces an unnecessary margin at Special:SearchClosed, ResolvedPublicActions

Description

Details

Event Timeline

OOjs UI produces an unnecessary margin at Special:Search
Closed, ResolvedPublic
Actions