Howto make twitter bootstrap compatible checkbox labels in simple_form?

Question

I'm trying to get two labels for one check box as described in Twitter Bootstrap's documentation. (see http://twitter.github.com/bootstrap/base-css.html#forms --> horizontal forms --> checkbox (below text input))

So what I want to display is a label for the description on the left, the check box itself and a hint right next to it on the right.

The standard implementation of twitter bootstrap in simple_form gem creates a <p> tag for displaying the hint since it tries to be consistent for all kinds of inputs.

I now want to create a custom wrapper for "bootstrap checkboxes" in the simple_form initializer but I just cannot figure out how to solve this.

This is how I currently implemented it using bare rails (erb):

<div class="control-group">
 <%= f.label :recurring, :class => 'control-label' %>
 <div class="controls">
   <%= f.label :recurring, :class => 'checkbox' do %>
    <%= f.check_box :recurring %>
    <%= t('.recurring_hint') %>
   <% end %>
 </div>
</div>

Can you help me or at least try to explain how these custom wrapper thing works? Thank you!

Edit: Let me ask my question more precisely: Can I use simple_form's wrappers API to use a label as a wrapper?

flooooo flooooo · Accepted Answer · 2012-06-12T19:38:31

Solution:

Update to newest version of simple_form (2.0.2, had 2.0)
Override BooleanInput:

app/inputs/boolean_input.rb

class BooleanInput < SimpleForm::Inputs::BooleanInput
  def input
    if nested_boolean_style?
        template.label_tag(nil, :class => "checkbox") {
          build_check_box + inline_label
        }
    else
      build_check_box
    end
  end
end

_form.html.erb

Call in template:

<%= f.input :recurring, :inline_label => t('.recurring_hint') %>

Howto make twitter bootstrap compatible checkbox labels in simple_form?

3 Answers