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

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