Question

I’m using Twitter Bootstrap.

I have the following code…

<div class="row">
  <div class="span5">
    <%= f.input :is_authorized_to_leave_with_child %>
    <%= f.input :is_emergency_contact %>
  </div>
  <div class="span5">
  </div>
</div>

The problem is, the label is displayed on the left and the checkbox to the right. Just the opposite on how Twitter Bootstrap sample form checkbox section look like, check it out: http://twitter.github.com/bootstrap/base-css.html#forms

The checkbox is in the right and the label is on the right. How can I display it like that?

Answer 1

As of formtastic 2.x, you could re-define the behavior of existing inputs using the app/inputs/#{ input_name.underscore }_input.rb file.

The default behavior of BooleanInput is: call to_html method, which calls label_with_nested_checkbox, which calls label_text_with_embedded_checkbox, which creates the following layout:

<label>
  <input />
</label>

and uses this logic:

check_box_html << "" << label_text

So, everything you need to do is just create a app/inputs/boolean_input.rb file with this code:

class BooleanInput < Formtastic::Inputs::BooleanInput
def label_text_with_embedded_checkbox
        label_text << "" << check_box_html
    end
end

And change an app/assets/formtastic-ie7.css file to make that input look a bit more pretty:

.formtastic .boolean label input {
    left:-4px;
}

Here’s how it looks like: