Ticket #649 (fixed enhancement)
Clickable labels for checkboxes and radio buttons
- Created: 2012-03-27 22:18:44
- Reported by: Swyter
- Assigned to: Franz
- Milestone: 1.4.9
- Component: usability
- Priority: normal
It seems weird to me that FluxBB doesn't have this one already...
Checkboxes and radio buttons are accompanied by a text string, the user expects to be able to click on the label and interact with option, but in our case these aren't linked and that may be an important usability problem. More over, the admin panel has lots of these ones.
So here's my patch for correcting that.
History
Swyter 2012-03-27 22:19:46
- Uploaded patch _swy_labelfix_admin_options.php.diff. (view)
Carefully done, manually.
Swyter 2012-03-29 08:32:58
Oh, and almost forgot about the CSS, seems that you've styled labels already (as blocks), so this needs to be accompanied by a neat workaround:
input[type="radio"]+label, input[type="checkbox"]+label{
display:inline-block;
}Just a basic reset. 
Franz 2012-03-29 20:01:56
Hmm, are those brackets allowed for HTML element IDs?
Also, this patch is not usable with Git. Any chance you can submit a pull request?
Thanks for contributing anyway!
Franz 2012-03-29 20:03:24
- Summary changed from Use <label for=> next to all the checkboxes and radio buttons... to Clickable labels for checkboxes and radio buttons.
Franz 2012-04-13 12:54:47
So that fixes that, thanks for the patch.
I redid most of it using regular expressions (that was fun!), but it's essentially the same solution, so I credited you. 
One more (well...) problem remaining: the plus selector is not supported in IE6, which we are still supporting in the 1.4 branch. And since this looks really ugly without the added CSS rule, we should better find a workaround. Any ideas? Or do I have to add another class in the markup?
EDIT: Also, display:inline-block seems to be an issue in IE6 and IE7.
why not using label with one control inside ( so no need for "id" and "for" attribute ) : label in w3c
another class in markup seems ok and isn't display:inline enough?
Swyter 2012-04-14 13:59:12
I didn't knew that including the control within the label was possible. I'll tell that next time I meet my Markup Languages teacher. Thanks!
@Frank: Good work. Maybe
admin_options.phpneeds a better formatting? It's a bit painful to read it right for the first time.
About IE6, I don't think that anyone who hosts/ administers a serious forum ever uses that kind of browser for modifying the board's options.
otherway in css there is already :
.pun label.conl {
display: inline-block;
padding-right: 12px;
}
.pun fieldset label {
display: block;
padding: 0 0 7px 0;
}so wraping in <label>...</label> with inline-block gives this result :
http://i.imgur.com/Tq3OR.png
if it was wraped in <label class="conl">...</label> it would give :
http://i.imgur.com/xujO8.png
and if another class was added <label class="inline-label">...</label> with css :
.pun fieldset label.inline-label {
padding: 0;
display: inline;
}it would give same thing as now :
http://i.imgur.com/NlAmz.png
the simplest one would be using "conl" class but that's a little style change