Page MenuHomePhabricator

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

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:

  1. https://en.wikipedia.org/w/index.php?search=Russia&title=Special:Search&fulltext=1 (default, with margin)
  2. 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

Related Gerrit Patches:

Event Timeline

stjn created this task.Feb 23 2017, 2:38 PM
Restricted Application added projects: Discovery, Discovery-Search. · View Herald TranscriptFeb 23 2017, 2:38 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

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.

stjn added a comment.Feb 23 2017, 4:54 PM

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

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

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

matmarex closed this task as Resolved.Feb 23 2017, 7:06 PM
matmarex claimed this task.
matmarex removed a project: Patch-For-Review.

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