Boolean checkboxes doesn't work in a normal Rails application

[rafaelfranca]

This is the generated HTML for the Rails application:

And this is the result:

This is caused because twitter bootstrap only add the padding-top to the first child that in a Rails application need to be the input hidden.

.controls > .radio:first-child, .controls > .checkbox:first-child {
  padding-top: 5px;
}

[georgehemmings]

@rafaelfranca could the hidden field be moved above the div class="controls"? I presume there is a good reason why it can't, but just thought I'd check. The Rails docs says the hidden has to be before the checkbox, not necessarily directly before.

[rafaelfranca]

Unfortunately no. We can put it only before or after the .checkbox label.

[mdo]

If the hidden field can go after, that's perfect—it will solve your problem. I'll see if we can clean the checkboxes up more in a future release.

[rafaelfranca]

Actually put the hidden filed after the .checkbox label solves the bootstrap issue but causes an issue in the Rails application.

The hidden fields need to be before any other checkbox input, because the last defined input with the same name is the one submitted. So if the hidden field is the last one, the value submitted will be always the hidden value.

This behavior is explained here: https://github.com/rails/rails/blob/defb751681640e11f2187439acdaaa12ca9b805f/actionpack/lib/action_view/helpers/form_helper.rb#L788-839

[mckramer]

I have tested a pretty simple fix for this problem by using :first-of-type selector instead of :first-child.

.controls > .radio:first-of-type, .controls > .checkbox:first-of-type {
  padding-top: 5px;
}

It appears to work with the hidden field and without it.

[rafaelfranca]

@markdotto could you take a look at the @mckramer suggestion?

[manuelmeurer]

@rafaelfranca Couldn't the hidden field go IN the label, directly before the checkbox input? That would solve the issue AFAICS. @mckramer's solution looks good as well, cleaner than the current one.

[rafaelfranca]

@manuelmeurer unfortunately no. This is not valid HTML (two inputs) inside a label.

[manuelmeurer]

Issue still seems to be there with Bootstrap 2.1.1. Is there any argument against implementing @mckramer's solution? I'd be happy to submit a pull request.