Align checkboxes for f.collection_check_boxes with Simple_Form

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 which Roles to apply to the new User. I would like the Roles to have their checkbox on the left, and their name on the right in a horizontal arrangement.

// "box" Admin //

instead of the current

"box"

Admin

My current code to show the Roles is this.

  <div class="control-group">
    <%= f.label 'Roles' %>
    <div class="controls">
      <%= f.collection_check_boxes 
                 :role_ids, Role.all, :id, :name %>
    </div>
  </div>

The part I am most getting hung up on is the fact that the f.collection_check_boxes generates code like this.

<span>
  <input blah blah />
  <label class="collection_check_boxes" blah>blah</label>
</span>

Which makes it hard for me to get a css class in there as there are 3 components that have to be touched. I've tried adding things such as dummy classes to the :html hash, but the dummy class doesn't even show up in the rendered html.

Any help is greatly appreciated

EDIT: Solution

Thanks to Baldrick, my working erb looks like this.

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

And my CSS is as follows

.checkbox_container {
  display: inline-block;
  vertical-align: -1px;
  margin: 5px;
 }
.checkbox_container input {
  display: inline;
 }
.checkbox_container .collection_check_boxes{
  display: inline;
  vertical-align: -5px;
 }

Baldrick

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;
}

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.

With Bootstrap you can:

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

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

  .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

来源：https://stackoverflow.com/questions/14146023/align-checkboxes-for-f-collection-check-boxes-with-simple-form

标签

ruby-on-rails

checkbox

simple-form