Page MenuHomePhabricator

Small unclickable gap between checkbox and label
Open, LowestPublic

Description

You can toggle a checkbox both by clicking the checkbox and its label. This makes them feel like they form just one clickable block. But there is a small gap between them that does not clickable. That gap is hard to hit, but when you do click on it, it is quite irritating that the checkbox doesn't react to the click.

You can test this live with the checkboxes on edit pages, or just in the demo on https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop. Note that this also applies to radio buttons, but not to CheckboxMultiselectWidget, RadioSelectWidget and related. These toggle even if you click between input and label, just like I'd expect it.

Event Timeline

Change 385004 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] FieldLayout: Avoid unclickable gap between widget and label in 'inline' align

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

For context, the light green area previously was not clickable and will be clickable now:

image.png (71×337 px, 5 KB)

(Similar issue affected the Apex theme and is also fixed.)

Change 385004 merged by jenkins-bot:
[oojs/ui@master] FieldLayout: Avoid unclickable gap between widget and label in 'inline' align

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

Jdforrester-WMF triaged this task as Medium priority.
Jdforrester-WMF moved this task from Backlog to OOjs-UI-0.24.1 on the OOUI board.
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.24.1); removed OOUI.
Jdforrester-WMF removed a project: Patch-For-Review.
matmarex edited projects, added OOUI; removed OOUI (OOjs-UI-0.24.1).

Actually, the fix caused another issue: T178612: The label of FieldLayout aligned inline is misaligned when it has to be wrapped over multiple lines. For now I'm reverting it (https://gerrit.wikimedia.org/r/#/c/385226/); I'll look into this more carefully later.

matmarex lowered the priority of this task from Medium to Lowest.

Change 440245 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] FieldLayout: Avoid unclickable gap between widget and label in 'inline' align

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

Change 440245 merged by jenkins-bot:
[oojs/ui@master] FieldLayout: Avoid unclickable gap between widget and label in 'inline' align

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

Volker_E moved this task from Next-up to OOUI-0.27.5 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.27.5); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.
matmarex removed matmarex as the assignee of this task.
matmarex edited projects, added OOUI; removed OOUI (OOUI-0.27.5).

Reverting again due to T201871: [regression] Layout issues in feedback dialog. It doesn't work right when the label contains a block element (e.g. if it's composed of several paragraphs <p>).

Ah sorry, that is not a duplicate. This task is about the space between the checkbox and the label, while my task is about the space between the lines of the label.