Fork me on GitHub
Subscribe 5

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-28 10:54:18

  • Description changed. (Diff)

Reines 2012-03-28 21:54:02

  • Milestone set to 1.4.9.
  • Priority changed from high to normal.

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. wink

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!

Comment edited 1 times (Diff)

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 09:20:25

  • Owner set to Franz.

Franz 2012-04-13 12:51:02

Commit 700b11c to fluxbb fluxbb-1.4

#649: Make labels for checkboxes / radio buttons clickable on admin options page.

Patch by Swyter, thanks!

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. smile

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.

Comment edited 1 times (Diff)

arw 2012-04-14 13:50:19

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.php

needs 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. smile

Comment edited 2 times (Diff, Diff 2)

arw 2012-04-14 14:14:51

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

Comment edited 1 times (Diff)

Franz 2012-04-24 13:07:47

Commit 03ce467 to fluxbb fluxbb-1.4

#649: Revert styling changes for inline labels in admin_options.php.

(reverse-merged from commit 700b11ca27c2c3c64842666e3642e9ebf0f6edfa)

Franz 2012-04-24 13:12:11

  • Status changed from open to fixed.

Commit 8288b72 to fluxbb fluxbb-1.4

#649: Apply CSS class "conl" to inline labels for radio buttons (styling is already done).

Fixes #649.