How to align input and label from collection_check_boxes?

Question

I am using collection_check_boxes and have problems with aligning checkbox and text. This is my code:

  <%= f.coll         


        
      

Answer 1

The definition for collection_check_boxes:

collection_check_boxes(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)

The last argument permits you to do something like this: (this does exactly what you want using collection_check_boxes)

<%= f.collection_check_boxes(:dog_ids, Dog.all, :id, :name) do |b| %>
  

    <%= b.label(class: "check_box") do %>
      

        <%= b.check_box(class: "check_box") %>
      

      

        <%= b.object.name %>
      
       
    <% end %>
  
<% end %>

Read more about collection_check_boxes

There is another method too: style your checkbox input and your label from css.

For a better css specificity I will add a new class named 'checkbox-list' to:

  <%= f.collection_check_boxes :dog_ids, Dog.all, :id, :name %>


.checkbox-list input[type="checkbox"] {
  display: inline-block;
  width: 10%;
}

.checkbox-list input[type="checkbox"] + label {
  display: inline-block;
  margin-left: 10%;
  width: 80%;
}