Skip to content

Bug with labels code on checkboxes #930

Closed
Vrael opened this Issue Mar 30, 2013 · 4 comments

2 participants

@Vrael
Vrael commented Mar 30, 2013

Code:

= f.input :training_days, as: :check_boxes, collection: [["Monday","0"], ["Tuesday","1"], ["Wednesday","2"], ["Thursday","3"], ["Friday","4"], ["Saturday","5"], ["Sunday","6"]], :input_html => { :class => 'calendar_week_checkbox'}, :wrapper_html => { :class => "calendar_week_form" }

Output:

<li id="team_training_days_input" class="calendar_week_form check_boxes input required">
<fieldset class="choices">
<legend class="label">
<input id="team_training_days_none" type="hidden" value="" name="team[training_days][]">
<ol class="choices-group">
<li class="choice">
<label for="team_training_days_0">
<input id="team_training_days_0" class="calendar_week_checkbox" type="checkbox" value="0" name="team[training_days][]">
Monday
</label>
</li>
<li class="choice">
...

But the label is wrong, because the checkbox is nested and it must be out of this html tag

Like this:

<li class="choice">
<input id="team_training_days_0" class="calendar_week_checkbox" type="checkbox" value="0" name="team[training_days][]">
<label for="team_training_days_0">
Monday
</label>
</li>
@twalpole
Collaborator

@Vrael Actually this is compliant HTML. From the spec

To associate a label with another control implicitly, the control element must be within the contents of the LABEL     element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

This means that the for attribute on the label is not technically required in this instance but formtastics output is correct

@twalpole twalpole closed this Mar 30, 2013
@Vrael
Vrael commented Mar 30, 2013

Ok, but then, how do you select only the text from the label with a CSS selector?

For example, if I will wish change the position of text label in relation to checkbox, or to change the background color of only text, not for checkbox.

@twalpole
Collaborator

That's very different from saying its "wrong", and is a question probably better posted to stackoverflow -http://stackoverflow.com/questions/tagged/formtastic

@Vrael
Vrael commented Mar 30, 2013

Sorry for that.

Thank you very much. I will see now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.