Simple_Form with Bootstrap Check Box

simple_form with Bootstrap check box

There's a number of options for this, see here for more of them:

The most straightforward (I think) is to use :label => false and :inline_label => true, on your checkbox, to change the where in the HTML the label is placed.

<%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => true if devise_mapping.rememberable? %>

This produces something like this for me:

Bootstrap 3 + simple_forms checkboxes

Like you said, you can get it working with a custom wrapper:

 config.wrappers :checkbox, tag: :div, class: "checkbox", error_class: "has-error" do |b|

    # Form extensions
    b.use :html5

    # Form components
    b.wrapper tag: :label do |ba|
      ba.use :input
      ba.use :label_text
    end

    b.use :hint,  wrap_with: { tag: :p, class: "help-block" }
    b.use :error, wrap_with: { tag: :span, class: "help-block text-danger" }
  end

Which you then reference in your input:

 = f.input :remember_me, :as => :boolean, :wrapper => :checkbox if devise_mapping.rememberable?

Note however this won't work for collection_check_boxes:

= f.input :roles, as: :check_boxes, wrapper: :checkbox, collection: @employee_roles, label: false

You could try hacking together a custom input for the latter case, but it's a bit messy. Maybe somebody else knows a better way... and perhaps simple_form will catch up with bootstrap 3 soon enough.

How to mark the simple_form checkbox based on a Array object?

Try this. This worked for me using bootstrap CSS. Check line 25 in my github repo here

<div class="form-group">
    <div class="row">
        <div class="col-sm-offset-3 col-sm-8">
            <%= f.collection_check_boxes :your_model_ids, Your_model.all, :id, :list_of_attributes do |cb| %>
            <% cb.label(class: "checkbox-inline input_checkbox") {cb.check_box(class: "checkbox") + cb.text} %>
        <% end %>
      </div>
    </div>
  </div>

And then use this in your CSS file for the custom input_checkbox class above

    .input_checkbox input {
    width: auto !important;
}

Left justifying the remember me checkbox in simpleform + bootstrap in rails

Until simple_form 3.1.0.rc1 there was no support for bootstrap 3 markup with simple_form. So the generated HTML contains mixed bootstrap 2 and 3 classes. The correct markup for bootstrap 3 should look like

<div class='form-group'>
    <div class="boolean input optional checkbox" id="user_remember_me_input">
        <input name="user[remember_me]" type="hidden" value="0" />
        <label class=" control-label" for="user_remember_me">
            <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1" />
            Remember me
        </label>
    </div>
</div>

simple_form custom inline_checkbox markup

Simple form has a couple of ways to render check boxes /radio buttons with labels. They are defined in the initializer file:

File: config/initializers/simple_form.rb

# Define the way to render check boxes / radio buttons with labels.
# Defaults to :nested for bootstrap config.
#   :inline => input + label
#   :nested => label > input
# config.boolean_style = :nested
config.boolean_style = :inline

What you want is to change this to :inline instead of :nested so that Simple Form renders just the inputs without the label wrappers on the input. See SimpleForm::Inputs::BooleanInput#input.

Modify the initializer file with above change and restart your rails server for this change to take effect. Use input as follows:

= f.input :my_checkbox, as: :boolean, wrapper: :inline_checkbox, label: "My label"

Following is another way to achieve something similar that does not require above configuration change. I've added a wrapper div with checkbox inline classes to wrap check box inputs and label:

= f.input :my_checkbox do
  = content_tag :div, class: 'checkbox inline' do
    = f.check_box :my_checkbox
    = f.label :my_checkbox

Bootstrap 3.2.0 with Simple_form checkbox

Just add .form-inline to form.

---

Related Topics