nktokyo
nktokyo

Reputation: 642

Align Checkbox and Label with collection_check_box

I have the same problem as the poster here Align checkboxes for f.collection_check_boxes with Simple_Form

My checkbox code is:

<%= f.collection_check_boxes :investor_city_ids, r.cities, :id, :name, {:item_wrapper_class => 'checkbox_container'} %>

But I see in the HTML generated that the class is not being set for the HTML generated

<input id="investor_investor_city_ids_1" name="investor[investor_city_ids][]" type="checkbox" value="1">
<label for="investor_investor_city_ids_1">Hamilton</label>
<input id="investor_investor_city_ids_2" name="investor[investor_city_ids][]" type="checkbox" value="2">
<label for="investor_investor_city_ids_2">Cambridge</label>

I've tried the collection_check_boxes code without the {} braces also but nothing seems to have any effect.

CSS is

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

Upvotes: 3

Views: 1903

Answers (2)

nktokyo
nktokyo

Reputation: 642

Fixed - I was using form_for, changing to simple_form_for resolved this. Not sure why it wasn't working for form_for.

Upvotes: 2

rlecaro2
rlecaro2

Reputation: 755

Check the docs. You need to specify the item_wrapper_tag for the class to be added. You could also use collection_wrapper_tag + class.

Let us know if it works.

GL & HF

Upvotes: 0

Related Questions