Align checkboxes for f.collection_check_boxes with Simple_Form

Question

I am using RoR and I am using the Simple_Form gem for my forms. I have an object relation whereby a User can have multiple Roles, and during creation, the admin can select

Answer 1

According to the doc of collection_check_boxes, there is an option item_wrapper_class to give a css class to the span containing the checkbox. Use it like that

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'checkbox_container' %>

And a CSS style to keep the checkbox and the label on the same line:

.checkbox_container input {
  display: inline;
}

Answer 2

With Bootstrap you can:

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'inline' %>

Answer 3

This was the first SO page for a DDG search with 'rails collection_check_boxes bootstrap', but it's not about Bootstrap, but here is a solution for Bootstrap 4 anyways.

This works with plain Rails and Bootstrap 4, no gem required. collection_check_boxes is a plain Rails method.

  .form-group
    =f.label :industry_interest
    %br
    =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb|
      =cb.check_box 
      =cb.label
      %br

or

  .form-group
    =f.label :industry_interest
    =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb|
      .form-check
        =cb.label class: 'form-check-label' do
          =cb.check_box class: 'form-check-input'
          =cb.text 

They look identical.

https://v4-alpha.getbootstrap.com/components/forms/#checkboxes-and-radios

Answer 4

In the latest 2.1.0 branch of SimpleForm with 2.3.1.0 of bootstrap-saas, installed with bootstrap option, the collection_check_boxes method resulted in some spans to which applying the inline item wrapper class had no good effect.

I was able to get the form to line up perfectly using the standard input, collection, :as => :check_boxes methodology. Then the inline style worked perfectly:

<%= f.input :roles, :collection => valid_roles, :label_method => :last, :value_method => :first, :as => :check_boxes, :item_wrapper_class => 'inline'  %>

My roles happen to be a simple array of arrays with value, label. Hope this helps.