Page MenuHomePhabricator

Options for Completion Suggester misaligned when description uses more than one line
Closed, ResolvedPublic

Description

See screenshot:

search.png (375×982 px, 49 KB)

In German localization, the description for "Strict mode" is longer than one line, which causes the label to come below the radio button instead of right to it.

Either change the CSS to make sure this doesn't happen for even such long labels, or make the description for German (and possibly other affected languages) shorter (though I can't imagine any shorter German translation for "no accent folding").

Event Timeline

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

Thanks for the report!

Either change the CSS to make sure this doesn't happen for even such long labels

That would be the best solution. I'm sure our translators made the message as short as possible. :-)

Deskana triaged this task as High priority.Nov 8 2016, 1:03 PM

This doesn't really break anything. Regardless, following up on bugs in recent releases is important. Marking this one as high priority.

One possible and very easy solution: add a display: flex; to the immediate container, i.e.

<div style="display:flex;">
  <div style="vertical-align:top; display:inline-block;">
    <input type="radio">
  </div>
  <div style="display:inline-block">
    <label>...</label>
    <div>...</div>
  </div>
</div>

Of course, this doesn't work in old browsers (http://caniuse.com/#feat=flexbox).

Change 320701 had a related patch set uploaded (by EBernhardson):
Completion preferences radio and content should be side-by-side

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

Change 320701 merged by jenkins-bot:
Completion preferences radio and content should be side-by-side

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

This is fixed now, and should be deployed next week during the usual train deployment.