Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

simple_form's collection_radio_button and custom label class

I'm trying to make a star rating form with radio collection using FontAwesome, for this I actually need to change the label classes of the collection_radio_button input generated by simple_form but can't find any obvious solution.

So far I use:

form_for @user do |f|
  f.collection_radio_buttons :rating, [[1, 'Bad'] ,[2, 'Ok'], [3, 'Great']],
                             :first, :last, { item_wrapper_tag: false }
end

Which generates:

<input id="review_rating_1" name="review[rating]" type="radio" value="1" />
<label class="collection_radio_buttons" for="review_rating_1">Bad</label>
<input id="review_rating_2" name="review[rating]" type="radio" value="2" />
<label class="collection_radio_buttons" for="review_rating_2">Ok</label>
<input id="review_rating_3" name="user[options]" type="radio" value="3" />
<label class="collection_radio_buttons" for="review_rating_3">Great</label>

But I'd like the labels to have an extra class, like:

<input id="review_rating_3" name="user[options]" type="radio" value="3" />
<label class="collection_radio_buttons icon-star" for="review_rating_3">Great</label>

UPDATE: This class is defined statically at: https://github.com/plataformatec/simple_form/blob/master/lib/simple_form/tags.rb#L43

like image 665
Sébastien Grosjean - ZenCocoon Avatar asked Jun 19 '13 11:06

Sébastien Grosjean - ZenCocoon


2 Answers

This can be achieved by using a block:

form_for @user do |f|
  f.collection_radio_buttons :rating, [[1, 'Bad'] ,[2, 'Ok'], [3, 'Great']],
                             :first, :last, { item_wrapper_tag: false } do |b|
    b.radio_button + b.label(:class => "collection_radio_buttons icon-star")
  end
end

This doc can showcase some other example: http://rubydoc.info/github/plataformatec/simple_form/SimpleForm/FormBuilder:collection_radio_buttons

like image 86
Sébastien Grosjean - ZenCocoon Avatar answered Nov 08 '22 00:11

Sébastien Grosjean - ZenCocoon


In case anyone wonders how to add class to label wrapping radiobutton input when you set boolean_style = :nested here is what I came with:

You can set option called :item_label_class when calling your input, f.e.:

<%= f.input :type, as: :radio_buttons,
                   collection: Listing::TYPES.map{ |type| [Listing.translate_type(type), type] },
                   label: false,
                   item_label_class: 'radio' %>

I wanted to automate this stuff, so I defined custom CollectionRadioButtonsInput class. You need to add to method apply_default_collection_options!:

def apply_default_collection_options!(options)
  super(options)
  options[:item_label_class] == 'radio' if input_type == :radio_buttons
end
like image 27
Dr.Strangelove Avatar answered Nov 08 '22 01:11

Dr.Strangelove