Styling the labels for a check box collection

[noctivityinc]

I have a simple HABTM relationship between categories and fonts. A category can have many fonts. Anyway, in my form I want to display a list of all the fonts with a checkbox next to each of them so I can select the fonts for a category.

The catch is that I want to add the font class to the LABEL for each option so that it is applied. In this case, the class is an attribute called class_name inside of the font model.

I have this:

= f.association :fonts

and have tried lots of things, including:

= f.association :fonts, :collection => Font.all.map { |o| [o.name, o.id, { :class => "#{o.class_name}" }] }, :as => :check_boxes

without luck. How can I accomplish this?

[carlosantoniodasilva]

Any collection helper, including Rails ones (ie collection_select) handles the third option in the collection as html attributes, unfortunately. I think the best you can do is to generate the check boxes + labels by hand, the old way.

This has been a pain in the ass for some time, I think it's time to solve that somehow in Rails and allow SimpleForm to help on that. I'll leave the issue open as a reminder for me to find a workaround and improve this.

Btw, please use the mailing list for questions ok. I believe there might be some answers there that could help you as well.

[carlosantoniodasilva]

So, I have scratched something to help handling such cases in SimpleForm, as you can see in e9bb328. SimpleForm collection helpers are able to receive a block in the new 2.0.rc version, which means you should be able to do something like that with current master:

f.input :font_ids, :as => :check_boxes do 
  f.collection_check_boxes :font_ids, Font.all, :id, :name do |b|
    b.check_box + b.label(:class => b.object.class_name)
  end
end

b is a special builder instance that gives you specific helpers to generate check box / radio button and label. Please check the docs/tests for more examples on that. Also make sure to use f.input with *_ids attribute instead of f.association, because the latter treats blocks as simple_fields_for calls.

Update: Please give it a try and let us know about any issue. Thanks.

[noctivityinc]

Thanks man but I get this:

undefined method `check_box' for "font_ids_10":String
referring to this line
10: = b.check_box + b.label(:class => b.object.class_name)

Joshua Lippiner
Noctivity Inc.
.: jlippiner@noctivity.com
.: 704-323-5661 tele
.: 310-919-3035 fax

On Feb 13, 2012, at 9:22 PM, Carlos Antonio da Silva wrote:

So, I have scratched something to help handling such cases in SimpleForm, as you can see in e9bb328. SimpleForm collection helpers are able to receive a block in the new 2.0.rc version, which means you should be able to do something like that with current master:

f.input :font_ids, :as => :check_boxes do 
 f.collection_check_boxes :font_ids, Font.all, :id, :name do |b|
   b.check_box + b.label(:class => b.object.class_name)
 end
end

b is a special builder instance that gives you specific helpers to generate check box / radio button and label. Please check the docs/tests for more examples on that. Also make sure to use f.input with *_ids attribute instead of f.association, because the latter treats blocks as simple_fields_for calls.

---

Reply to this email directly or view it on GitHub:
#452 (comment)

[carlosantoniodasilva]

Are you sure b is the right builder inside f.collection_check_box block?

I've just created an example app with article + categories as example, using master, and it worked. Here is the usage:

<%= f.input :category_ids, :as => :check_boxes do %>
  <%= f.collection_check_boxes :category_ids, Category.order(:name), :id, :name do |b|
    b.label { b.check_box + b.text }
  end %>
<% end %>

And the ouput

<div class="input check_boxes optional">
  <label class="check_boxes optional" for="article_category_ids"> Category ids</label>
  <span>
    <label for="article_category_ids_4">
      <input id="article_category_ids_4" name="article[category_ids][]" type="checkbox" value="4" />agile</label>
  </span>
  <span>
    <label for="article_category_ids_2">
      <input id="article_category_ids_2" name="article[category_ids][]" type="checkbox" value="2" />design</label>
  </span>
  <span>
    <label for="article_category_ids_1">
      <input id="article_category_ids_1" name="article[category_ids][]" type="checkbox" value="1" />development</label>
  </span>
  <span>
    <label for="article_category_ids_5">
      <input id="article_category_ids_5" name="article[category_ids][]" type="checkbox" value="5" />events</label>
  </span>
  <span>
    <label for="article_category_ids_3">
      <input id="article_category_ids_3" name="article[category_ids][]" type="checkbox" value="3" />project management</label>
  </span>
  <input name="article[category_ids][]" type="hidden" value="" />
</div>

[noctivityinc]

Well something is up and most likely it's the version im on.

I'm running...

gem 'simple_form', '~> 2.0rc'

and when inspect "b" I get a string literal, like this - "font_ids_21" and not an object, which I believe I should be seeing.

Any thoughts? Also, Im running HAML but that shouldn't make a difference.

J

On Feb 13, 2012, at 10:11 PM, Carlos Antonio da Silva wrote:

Are you sure b is the right builder inside f.collection_check_box block?

I've just created an example app with article + categories as example, using master, and it worked. Here is the usage:

   <%= f.input :category_ids, :as => :check_boxes do %>
     <%= f.collection_check_boxes :category_ids, Category.order(:name), :id, :name do |b|
       b.label { b.check_box + b.text }
     end %>
   <% end %>

And the ouput

<div class="input check_boxes optional">
 <label class="check_boxes optional" for="article_category_ids"> Category ids</label>
 <span>
   <label for="article_category_ids_4">
     <input id="article_category_ids_4" name="article[category_ids][]" type="checkbox" value="4" />agile</label>
 </span>
 <span>
   <label for="article_category_ids_2">
     <input id="article_category_ids_2" name="article[category_ids][]" type="checkbox" value="2" />design</label>
 </span>
 <span>
   <label for="article_category_ids_1">
     <input id="article_category_ids_1" name="article[category_ids][]" type="checkbox" value="1" />development</label>
 </span>
 <span>
   <label for="article_category_ids_5">
     <input id="article_category_ids_5" name="article[category_ids][]" type="checkbox" value="5" />events</label>
 </span>
 <span>
   <label for="article_category_ids_3">
     <input id="article_category_ids_3" name="article[category_ids][]" type="checkbox" value="3" />project management</label>
 </span>
 <input name="article[category_ids][]" type="hidden" value="" />
</div>

---

Reply to this email directly or view it on GitHub:
#452 (comment)

[carlosantoniodasilva]

Ah, you have to bundle from master to test it, I did that change yesterday. I think I didn't mention that, sorry :D

[noctivityinc]

Ahh - not sure I've done that before :) So I cant use bundler for this?

Best,

J

Joshua Lippiner
Noctivity Inc.
.: jlippiner@noctivity.com
.: 704-323-5661 tele
.: 310-919-3035 fax

On Feb 14, 2012, at 4:26 AM, Carlos Antonio da Silva wrote:

Ah, you have to bundle from master to test it, I did that change yesterday. I think I didn't mention that, sorry :D

---

Reply to this email directly or view it on GitHub:
#452 (comment)

[carlosantoniodasilva]

Yeah, you just need to give the :git option to gem in your Gemfile, instead of a specific version. Like this:

gem 'simple_form', :git => 'git://github.com/plataformatec/simple_form.git'

Then run bundle update. More info.

[noctivityinc]

ahh - ill give that a try in a bit. I see what you are saying now :)

Joshua Lippiner
Noctivity Inc.
.: jlippiner@noctivity.com
.: 704-323-5661 tele
.: 310-919-3035 fax

On Feb 14, 2012, at 9:50 AM, Carlos Antonio da Silva wrote:

Yeah, you just need to give the :git option to gem in your Gemfile, instead of a specific version. Like this:

gem 'simple_form', :git => 'git://github.com/plataformatec/simple_form.git'

More info.

---

Reply to this email directly or view it on GitHub:
#452 (comment)

[noctivityinc]

It works! Thanks!

Joshua Lippiner
Noctivity Inc.
.: jlippiner@noctivity.com
.: 704-323-5661 tele
.: 310-919-3035 fax

On Feb 13, 2012, at 9:22 PM, Carlos Antonio da Silva wrote:

So, I have scratched something to help handling such cases in SimpleForm, as you can see in e9bb328. SimpleForm collection helpers are able to receive a block in the new 2.0.rc version, which means you should be able to do something like that with current master:

f.input :font_ids, :as => :check_boxes do 
 f.collection_check_boxes :font_ids, Font.all, :id, :name do |b|
   b.check_box + b.label(:class => b.object.class_name)
 end
end

b is a special builder instance that gives you specific helpers to generate check box / radio button and label. Please check the docs/tests for more examples on that. Also make sure to use f.input with *_ids attribute instead of f.association, because the latter treats blocks as simple_fields_for calls.

---

Reply to this email directly or view it on GitHub:
#452 (comment)

[carlosantoniodasilva]

Awesome, thanks.

[jfelchner]

@carlosantoniodasilva sorry to revive an old thread, but is there an easier way to do this now with the new wrapper syntax? I'll add the solution to the wiki if you'd like.

[rafaelfranca]

No. The only way right now is using what is described here #452 (comment)

[digitalecho]

Anyone know why I get this output:

<div class="form-group check_boxes optional order_option_ids">
<label class="check_boxes optional control-label" for="order_option_ids"> Health potion option ids</label>
<span>
<label for="order_option_ids_2">
     <label for="order_option_ids_2">
        <input type="checkbox" value="2" name="order[health_potion_option_ids][]" id="order_option_ids_2">Add more caffeine
     </label>
</label>
</span>

I am doing this, as stated above but I am getting double labels:

<%= f.input :category_ids, :as => :check_boxes do %>
  <%= f.collection_check_boxes :category_ids, Category.order(:name), :id, :name do |b|
    b.label { b.check_box + b.text }
  end %>
<% end %>

using simple_form (3.1.0)
rails 4.2

[carlosantoniodasilva]

@digitalecho please try sending your question to the mailing list, there are more people there that might help.

[midu]

same issue as @digitalecho here, did you figure it out?

[aaronmcadam]

I'm having the same issue, labels get doubled trying to manually render labels

[carlosantoniodasilva]

@aaronmcadam could you provide a sample app showing the issue? Please feel free to open a new issue with the app then, thanks.

[aaronmcadam]

Hi @carlosantoniodasilva, thanks for replying. I've created a new issue. It looks like the issue happens when using the default configuration. Is there a way to ignore it?