css - How to align input and label from collection_check_boxes? -
i using collection_check_boxes
, have problems aligning checkbox , text. code:
<div class="col-md-4"> <%= f.collection_check_boxes :dog_ids, dog.all, :id, :name %> </div>
form displayed this:
[checkbox1] text1 [checkbox2] text2 [checkbox3] text3
i trying align input , label didn't have success. have seen these question don't work me: align checkboxes f.collection_check_boxes simple_form
i want accomplish this:
[checkbox1] text1 [checkbox2] text2 [checkbox3] text3
thank help!
the definition collection_check_boxes
:
collection_check_boxes(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)
the last argument permits this: (this want using collection_check_boxes)
<%= f.collection_check_boxes(:dog_ids, dog.all, :id, :name) |b| %> <div class="row"> <%= b.label(class: "check_box") %> <div class="col-xs-4"> <%= b.check_box(class: "check_box") %> </div> <div class="col-xs-8"> <%= b.object.name %> </div> <% end %> </div> <% end %>
read more collection_check_boxes
there method too: style checkbox input , label css.
for better css specificity add new class named 'checkbox-list' to:
<div class="col-md-4 checkbox-list"> <%= f.collection_check_boxes :dog_ids, dog.all, :id, :name %> </div> .checkbox-list input[type="checkbox"] { display: inline-block; width: 10%; } .checkbox-list input[type="checkbox"] + label { display: inline-block; margin-left: 10%; width: 80%; }
Comments
Post a Comment