Checkbox and Radiobutton Selection Area Too Wide [#53405]

In Firefox, Checkbox and Radiobutton Selection Area Too Wide

For example, on the "Edit Vocabulary" page, the "page" and "story" options under "Types" expand to the full page width. So if a user clicks in the whitespace anywhere to the right of an option, that option will be selected (or deselected, if it's already selected). The problem is that in drupal.css the ".form-item" class for labels is set to "display: block."

The original css:

.form-item label {

  display: block;

  font-weight: bold;

}

The fixed css:

.form-item label {

  font-weight: bold;

}

The problem is simply fixed by removing the "display: block;" line from the css.

Comment	File	Size	Author
	drupal-css_0.patch	224 bytes	nicklucas

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

yched CreditAttribution: yched commented 14 March 2006 at 19:28

I agree that it is a real usability issue.

It's just annoying when you inadvertantly give focus to a textfield by clicking 4 inches away of its label,
but it can be really dangerous when you check / uncheck some radio / checkbox and don't even notice it.

Some people (including myself - don't ask me to explain...) tend to click rather compulsively in what
they assume to be "safe" (nonsensitive) zones.
My clicking habits might be questionable, but there is nonetheless a UI-design flaw here.

I'm not sure the proposed fix is the right solution though.

As is, it breaks the user/login form, and file selector fileds.
("breaks" means : no "carriage return" between the label and the widget)
Other fields seem ok (in box-grey theme, anyway)

Comment #2

yched CreditAttribution: yched commented 16 March 2006 at 21:00

Title:	In Firefox, Checkbox and Radiobutton Selection Area Too Wide	» Checkbox and Radiobutton Selection Area Too Wide
Priority:	Minor	» Normal

Update : same problem with MSIE 6.0

I pushed the priority one level up, because :

if IE is also impacted, then a lot more people are...
on IE, this issue is made worse by a IE-specific "weird" behavior on drop-down selects :
- select an element,
- click somewhere else (unfocus the select) (optional...),
- click on the drop-down label :
  the first element gets selected, discarding your previous selection

To me that's in fact a 'critical' usability issue, but I know there's a lot of stress on critical issues thes days, so i'll stay humble and keep it 'normal'...

Comment #3

jblack CreditAttribution: jblack commented 29 March 2006 at 18:30

Status:

Needs review

» Reviewed & tested by the community

Patch does as promised with no observed side effects.

As a side note, "click to the side" is a common behaviour. One of the reason for the behaviour is to enable scrolling with the arrow keys for the browser.

Comment #4

Steven CreditAttribution: Steven commented 30 March 2006 at 17:55

Status:

Reviewed & tested by the community

» Fixed

That display: block; is there for a reason, it keeps the label on its own line. You can see this easily on the menu settings on node/add, which are messed up after applying this patch.

The correct solution is to add display: inline; to label.option instead.