Page MenuHomePhabricator
Create Task
Maniphest T184526

Multi-line checkbox/radio labels should be aligned to the top, not middle
Closed, ResolvedPublic
Actions

Assigned To
Esanders
Authored By
Esanders
Jan 9 2018, 2:47 PM
Tags
Referenced Files
F12647876: image.png
Jan 19 2018, 1:00 AM
F12647883: image.png
Jan 19 2018, 1:00 AM
F12342781: image.png
Jan 9 2018, 2:47 PM
F12342797: image.png
Jan 9 2018, 2:47 PM
F12342785: image.png
Jan 9 2018, 2:47 PM
F12342799: image.png
Jan 9 2018, 2:47 PM
F12342755: image.png
Jan 9 2018, 2:47 PM
F12342801: image.png
Jan 9 2018, 2:47 PM
Subscribers
Aklapper
Esanders
gerritbot
Schnark
Volker_E
Tokens
"Like" token, awarded by Jdforrester-WMF.

Description

image.png (81×475 px, 8 KB)

In longer lists of items, centre aligning can cause confusion over where labels start and end:

image.png (201×396 px, 9 KB)

Top alignment is more commonly used and avoids this confusion:

image.png (210×399 px, 9 KB)

It is commonly used on popular sites, such as Wikipedia:

image.png (156×373 px, 20 KB)

image.png (795×537 px, 62 KB)

image.png (209×262 px, 24 KB)

Details

SubjectRepoBranchLines +/-
Use vertical-align:top for check/radio label alignmentoojs/uimaster+9 -3
Customize query in gerrit

Related Objects

Event Timeline

Esanders created this task.Jan 9 2018, 2:47 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 9 2018, 2:47 PM
Volker_E subscribed.Jan 19 2018, 1:00 AM

Putting personal bias aside (which would agree with the statement and the call above beforehand), when comparing macOS Human Interface Guidelines, Material Design, Lightning Design System, none of those explicitly outline how to handle multiline labels on checkboxes/radios.
Nonetheless, I've just found one place in OS X settings, where a top alignment seems to be not the primary choice:

image.png (526×678 px, 233 KB)

Everywhere else they are:

image.png (131×666 px, 25 KB)

Windows does top-align multiline labels too and our own M101 is featuring vertically top-aligned one as template.

From all those comparisons and the arguments given above, I'm for changing this as well.

Jdforrester-WMF awarded a token.Jan 19 2018, 9:17 PM
Volker_E triaged this task as Low priority.Jan 22 2018, 8:09 PM
Volker_E moved this task from Backlog to Next-up on the OOUI board.Feb 2 2018, 1:57 AM
Schnark mentioned this in T192823: Use top alignment for multi-line check/radio labels.Apr 24 2018, 6:57 AM
gerritbot subscribed.Apr 24 2018, 3:42 PM

Change 428389 had a related patch set uploaded (by Jforrester; owner: Esanders):
[oojs/ui@master] Use vertical-align:top for check/radio label alignment

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

gerritbot added a project: Patch-For-Review.Apr 24 2018, 3:42 PM
Jdforrester-WMF assigned this task to Esanders.Apr 24 2018, 3:43 PM
Jdforrester-WMF merged a task: T192823: Use top alignment for multi-line check/radio labels.
Jdforrester-WMF moved this task from Next-up to OOUI-0.26.5 on the OOUI board.
Jdforrester-WMF edited projects, added OOUI (OOUI-0.26.5); removed OOUI.
Jdforrester-WMF added a subscriber: Schnark.
gerritbot added a comment.Apr 24 2018, 4:12 PM

Change 428389 merged by jenkins-bot:
[oojs/ui@master] Use vertical-align:top for check/radio label alignment

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

Volker_E closed this task as Resolved.Apr 24 2018, 11:02 PM
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.
• 238482n375 removed Esanders as the assignee of this task.Jun 15 2018, 8:03 AM
• 238482n375 lowered the priority of this task from Low to Lowest.
• 238482n375 moved this task from Next Up to In Code Review on the Analytics-Kanban board.
• 238482n375 added projects: Analytics-Kanban, acl*security, Wikimedia-VE-Campaigns (S2-2018), Scap (Scap3-Adoption-Phase2), AbuseFilter, Data-release, Hashtags, LabsDB-Auditor, Ladies-That-FOSS-MediaWiki, Language-2018-Apr-June, Language-2018-Jan-Mar, HHVM, HAWelcome.
• 238482n375 edited subscribers, added: • 238482n375; removed: Aklapper.

SG9tZVBoYWJyaWNhdG9yCk5vIG1lc3NhZ2VzLiBObyBub3RpZmljYXRpb25zLgoKICAgIFNlYXJjaAoKQ3JlYXRlIFRhc2sKTWFuaXBoZXN0ClQxOTcyODEKRml4IGZhaWxpbmcgd2VicmVxdWVzdCBob3VycyAodXBsb2FkIGFuZCB0ZXh0IDIwMTgtMDYtMTQtMTEpCk9wZW4sIE5lZWRzIFRyaWFnZVB1YmxpYwoKICAgIEVkaXQgVGFzawogICAgRWRpdCBSZWxhdGVkIFRhc2tzLi4uCiAgICBFZGl0IFJlbGF0ZWQgT2JqZWN0cy4uLgogICAgUHJvdGVjdCBhcyBzZWN1cml0eSBpc3N1ZQoKICAgIE11dGUgTm90aWZpY2F0aW9ucwogICAgQXdhcmQgVG9rZW4KICAgIEZsYWcgRm9yIExhdGVyCgpUYWdzCgogICAgQW5hbHl0aWNzLUthbmJhbiAoSW4gUHJvZ3Jlc3MpCgpTdWJzY3JpYmVycwpBa2xhcHBlciwgSkFsbGVtYW5kb3UKQXNzaWduZWQgVG8KSkFsbGVtYW5kb3UKQXV0aG9yZWQgQnkKSkFsbGVtYW5kb3UsIEZyaSwgSnVuIDE1CkRlc2NyaXB0aW9uCgpPb3ppZSBqb2JzIGhhdmUgYmVlbiBmYWlsaW5nIGF0IGxlYXN0IGEgZmV3IHRpbWVzIGVhY2guIE1vcmUgaW52ZXN0aWdhdGlvbiBuZWVkZWQuCkpBbGxlbWFuZG91IGNyZWF0ZWQgdGhpcyB0YXNrLkZyaSwgSnVuIDE1LCA3OjIxIEFNCkhlcmFsZCBhZGRlZCBhIHN1YnNjcmliZXI6IEFrbGFwcGVyLiC3IFZpZXcgSGVyYWxkIFRyYW5zY3JpcHRGcmksIEp1biAxNSwgNzoyMSBBTQpKQWxsZW1hbmRvdSBjbGFpbWVkIHRoaXMgdGFzay5GcmksIEp1biAxNSwgNzoyMiBBTQpKQWxsZW1hbmRvdSB1cGRhdGVkIHRoZSB0YXNrIGRlc2NyaXB0aW9uLiAoU2hvdyBEZXRhaWxzKQpKQWxsZW1hbmRvdSBhZGRlZCBhIHByb2plY3Q6IEFuYWx5dGljcy1LYW5iYW4uCkpBbGxlbWFuZG91IG1vdmVkIHRoaXMgdGFzayBmcm9tIE5leHQgVXAgdG8gSW4gUHJvZ3Jlc3Mgb24gdGhlIEFuYWx5dGljcy1LYW5iYW4gYm9hcmQuCkNoYW5nZSBTdWJzY3JpYmVycwpDaGFuZ2UgUHJpb3JpdHkKQXNzaWduIC8gQ2xhaW0KTW92ZSBvbiBXb3JrYm9hcmQKQ2hhbmdlIFByb2plY3QgVGFncwpBbmFseXRpY3MtS2FuYmFuCtcKU2VjdXJpdHkK1wpXaWtpbWVkaWEtVkUtQ2FtcGFpZ25zIChTMi0yMDE4KQrXClNjYXAK1wpTY2FwIChTY2FwMy1BZG9wdGlvbi1QaGFzZTIpCtcKQWJ1c2VGaWx0ZXIK1wpEYXRhLXJlbGVhc2UK1wpIYXNodGFncwrXCkxhYnNEQi1BdWRpdG9yCtcKTGFkaWVzLVRoYXQtRk9TUy1NZWRpYVdpa2kK1wpMYW5ndWFnZS0yMDE4LUFwci1KdW5lCtcKTGFuZ3VhZ2UtMjAxOC1KYW4tTWFyCtcKSEhWTQrXCkhBV2VsY29tZQrXCkJvbGQKSXRhbGljcwpNb25vc3BhY2VkCkxpbmsKQnVsbGV0ZWQgTGlzdApOdW1iZXJlZCBMaXN0CkNvZGUgQmxvY2sKUXVvdGUKVGFibGUKVXBsb2FkIEZpbGUKTWVtZQpQcmV2aWV3CkhlbHAKRnVsbHNjcmVlbiBNb2RlClBpbiBGb3JtIE9uIFNjcmVlbgoyMzg0ODJuMzc1IGFkZGVkIHByb2plY3RzOiBTZWN1cml0eSwgV2lraW1lZGlhLVZFLUNhbXBhaWducyAoUzItMjAxOCksIFNjYXAgKFNjYXAzLUFkb3B0aW9uLVBoYXNlMiksIEFidXNlRmlsdGVyLCBEYXRhLXJlbGVhc2UsIEhhc2h0YWdzLCBMYWJzREItQXVkaXRvciwgTGFkaWVzLVRoYXQtRk9TUy1NZWRpYVdpa2ksIExhbmd1YWdlLTIwMTgtQXByLUp1bmUsIExhbmd1YWdlLTIwMTgtSmFuLU1hciwgSEhWTSwgSEFXZWxjb21lLlBSRVZJRVcKMjM4NDgybjM3NSBtb3ZlZCB0aGlzIHRhc2sgZnJvbSBJbiBQcm9ncmVzcyB0byBJbiBDb2RlIFJldmlldyBvbiB0aGUgQW5hbHl0aWNzLUthbmJhbiBib2FyZC4KMjM4NDgybjM3NSByZW1vdmVkIEpBbGxlbWFuZG91IGFzIHRoZSBhc3NpZ25lZSBvZiB0aGlzIHRhc2suCjIzODQ4Mm4zNzUgdHJpYWdlZCB0aGlzIHRhc2sgYXMgTG93ZXN0IHByaW9yaXR5LgoyMzg0ODJuMzc1IHJlbW92ZWQgc3Vic2NyaWJlcnM6IEFrbGFwcGVyLCBKQWxsZW1hbmRvdS4KQ29udGVudCBsaWNlbnNlZCB1bmRlciBDcmVhdGl2ZSBDb21tb25zIEF0dHJpYnV0aW9uLVNoYXJlQWxpa2UgMy4wIChDQy1CWS1TQSkgdW5sZXNzIG90aGVyd2lzZSBub3RlZDsgY29kZSBsaWNlbnNlZCB1bmRlciBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSAoR1BMKSBvciBvdGhlciBvcGVuIHNvdXJjZSBsaWNlbnNlcy4gQnkgdXNpbmcgdGhpcyBzaXRlLCB5b3UgYWdyZWUgdG8gdGhlIFRlcm1zIG9mIFVzZSwgUHJpdmFjeSBQb2xpY3ksIGFuZCBDb2RlIG9mIENvbmR1Y3QuILcgV2lraW1lZGlhIEZvdW5kYXRpb24gtyBQcml2YWN5IFBvbGljeSC3IENvZGUgb2YgQ29uZHVjdCC3IFRlcm1zIG9mIFVzZSC3IERpc2NsYWltZXIgtyBDQy1CWS1TQSC3IEdQTApZb3VyIGJyb3dzZXIgdGltZXpvbmUgc2V0dGluZyBkaWZmZXJzIGZyb20gdGhlIHRpbWV6b25lIHNldHRpbmcgaW4geW91ciBwcm9maWxlLCBjbGljayB0byByZWNvbmNpbGUu

• 238482n375 set Security to Software security bug.Jun 15 2018, 8:06 AM
• 238482n375 changed the visibility from "Public (No Login Required)" to "Custom Policy".

SG9tZVBoYWJyaWNhdG9yCk5vIG1lc3NhZ2VzLiBObyBub3RpZmljYXRpb25zLgoKICAgIFNlYXJjaAoKQ3JlYXRlIFRhc2sKTWFuaXBoZXN0ClQxOTcyODEKRml4IGZhaWxpbmcgd2VicmVxdWVzdCBob3VycyAodXBsb2FkIGFuZCB0ZXh0IDIwMTgtMDYtMTQtMTEpCk9wZW4sIE5lZWRzIFRyaWFnZVB1YmxpYwoKICAgIEVkaXQgVGFzawogICAgRWRpdCBSZWxhdGVkIFRhc2tzLi4uCiAgICBFZGl0IFJlbGF0ZWQgT2JqZWN0cy4uLgogICAgUHJvdGVjdCBhcyBzZWN1cml0eSBpc3N1ZQoKICAgIE11dGUgTm90aWZpY2F0aW9ucwogICAgQXdhcmQgVG9rZW4KICAgIEZsYWcgRm9yIExhdGVyCgpFVzZSC3IERpc2NsYWltZXIgtyBDQy1CWS1TQSC3IEdQTApZb3VyIGJyb3dzZXIgdGltZXpvbmUgc2V0dGluZyBkaWZmZXJzIGZyb20gdGhlIHRpbWV6b25lIHNldHRpbmcgaW4geW91ciBwcm9maWxlLCBjbGljayB0byByZWNvbmNpbGUu

Aklapper raised the priority of this task from Lowest to Low.Jun 15 2018, 1:56 PM
Aklapper removed projects: HAWelcome, HHVM, Language-2018-Jan-Mar, Language-2018-Apr-June, Ladies-That-FOSS-MediaWiki, LabsDB-Auditor, Hashtags, Data-release, AbuseFilter, Scap (Scap3-Adoption-Phase2), Wikimedia-VE-Campaigns (S2-2018), acl*security, Analytics-Kanban.
Aklapper edited subscribers, added: Aklapper; removed: • 238482n375.
Restricted Application added a project: acl*security. · View Herald TranscriptJun 15 2018, 1:56 PM
Aklapper assigned this task to Esanders.Jun 15 2018, 1:56 PM
Aklapper removed a project: acl*security.
Aklapper changed the visibility from "Custom Policy" to "Public (No Login Required)".
AfroThundr3007730 merged a task: T192823: Use top alignment for multi-line check/radio labels.Jul 1 2018, 5:28 AM
AfroThundr3007730 added a subscriber: GerritBot.
Esanders mentioned this in T197701: CX2: Show publish settings as a dialog with more detailed descriptions.Apr 24 2019, 10:07 PM
Aklapper edited subscribers, added: gerritbot; removed: GerritBot.May 16 2023, 10:18 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL