Page MenuHomePhabricator

Keep checkbox and label together in the watchlist options form
Closed, ResolvedPublic


The recent watchlist improvement T50615 should wrap checkbox and adjacent description together into <span style="white-space:nowrap"> to avoid checkbox at line end and description starting next line.

The floating arrangement of

<input id="hideminor" type="checkbox" />
<label for="hideminor"></label>

creates a logical (semantic) junction between both elements by for= but does not prescribe where and how the browser shall arrange visible elements within a page; they may occur anywhere.

Best would be if a line break is permitted after first word of description, but that is inpredictable, since label content comes from translatewiki and would cause illegal nesting. &#160; might work on some browsers but is less desirable. Since description texts are supposed to be very short that should fit into one wrapping element for both checkbox and label.

This issue goes for all forms (with floating lines of checkboxes or other form elements) and should be mentioned in GUI guide on mw:.

Related Objects

View Standalone Graph
This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.

Event Timeline

PerfektesChaos raised the priority of this task from to Needs Triage.
PerfektesChaos updated the task description. (Show Details)
PerfektesChaos added a subscriber: PerfektesChaos.

Hmm, interesting. I don't think that we can do this for all checkboxes everywhere (I think the possible problem in the case where a label would really need to wrap is worse than the problem of unnecessary wrapping we have now, and I personally won't volunteer to audit all of our codebase for this ;) ), but we can probably do it for the watchlist ones.

Change 254267 had a related patch set uploaded (by Bartosz Dziewoński):
SpecialWatchlist: Keep checkboxes and their labels together

matmarex renamed this task from Keep checkbox and label together, in all forms to Keep checkbox and label together in the watchlist options form.Nov 19 2015, 8:40 PM
matmarex claimed this task.
matmarex set Security to None.

I rephrased the title to limit the scope to something that can actually be fixed by a single person. If you actually ran into other pages with this issue, please file separate tasks (or a tracking bug if there are many).

Jdforrester-WMF triaged this task as Medium priority.
Jdforrester-WMF removed a project: Patch-For-Review.

Change 254267 merged by jenkins-bot:
SpecialWatchlist: Keep checkboxes and their labels together

@matmarex: Above I had limited the issue to all forms (with floating lines of checkboxes or other form elements).

In many cases, there is not a floating line of inline items like single words and checkboxes between, but a kind of vertical list with exactly one checkbox in the beginning of a line, line break, and next checkbox at beginning of a new line. Those are not affected.

Currently I don't recall other active forms with such floating line layout, but you might want to perform the same exercise on the sibling: Recentchanges. Some log pages, contributions or allpages might be affected in future when equipped with other elements. Any list with filtering options might be converted from links (which are not kept together with something else) into floating line of form elements and adjacent label.

RecentChanges still uses the list of links (see T119084), but when/if it gets changed, someone should copy the solution from Watchlist.

I don't know any other forms that have this problem, either. I know a few that already use your solution (ProtectedPages, Controbutions).