CODEWITHSUNDEEP
cssruby-on-railsruby-on-rails-3simple-form
marcamillion
marcamillion

Reputation: 33755

Using simple_form how do I get this class on these inner labels vs the outer label ones?

So this is the outcome I am trying to get:

<div class="control-group">
  <label class="control-label" for="ListingType">Listing Type:</label>
  <div class="controls">
    <label class="inline"><input type="radio" name="ListingType"> For Sale</label>
    <label class="inline"><input type="radio" name="ListingType"> For Rent</label>
  </div>
</div>

I tried this:

<%= f.association :listing_type, label: "Listing Type: ", as: :radio_buttons, input_html: { class: 'inline'} %>

This is what was produced:

<div class="control-group radio_buttons optional">
   <label class="radio_buttons optional control-label">Listing Type:</label>
   <div class="controls">
      <label class="radio"><input class="radio_buttons optional inline" id="listing_listing_type_id_1" name="listing[listing_type_id]" type="radio" value="1" />For Sale</label>
      <label class="radio"><input class="radio_buttons optional inline" id="listing_listing_type_id_2" name="listing[listing_type_id]" type="radio" value="2" />For Rent</label>
  </div>
</div>

Notice the label.class="radio" as opposed to label.class="inline".

That's the major thing I am trying to get done properly.

I tried label_html: { class: 'inline' } and it produces this: 

<div class="control-group radio_buttons optional">
   <label class="radio_buttons optional control-label inline">Listing Type:</label>
   <div class="controls">
     <label class="radio"><input class="radio_buttons optional" id="listing_listing_type_id_1" name="listing[listing_type_id]" type="radio" value="1" />For Sale</label>
     <label class="radio"><input class="radio_buttons optional" id="listing_listing_type_id_2" name="listing[listing_type_id]" type="radio" value="2" />For Rent</label>
   </div>
</div>

i.e. it moves the class inline to the outermost <label> as opposed to the label for each radio button.

Thoughts?

Upvotes: 2

Views: 1151

Answers (2)

evedovelli
evedovelli

Reputation: 2135

The answer from @moonfly is no longer true for current version of simple_form (I have tried on version 3.3.1).

To change the class of each radio button label you have to use the option item_label_class like this:

<%= f.association :listing_type, label: "Listing Type: ", as: :radio_buttons, item_label_class: 'inline' %>

Or from @moonfly's answer:

= user.input :resident, 
     :collection => [["In the U.S", true],["Outside the U.S.", false]], 
     :label_method => :first, 
     :value_method => :last,
     :as => :radio_buttons, 
     :label => "Where is your principle residence?",
     :item_label_class => 'inline'

item_wrapper_class will modify the class of each radio button span for newer versions of simple_form.

Upvotes: 0

moonfly
moonfly

Reputation: 1820

Just copying @flynfish answer from how to change class of a label for checkboxes in simple_form to this thread. Seems to be the one according to @marcamillion comment here.

You can give the label a class with this option :item_wrapper_class => 'class_goes_here'

Here is a full example:

= user.input :resident, 
         :collection => [["In the U.S", true],["Outside the U.S.", false]], 
         :label_method => :first, 
         :value_method => :last,
         :as => :radio_buttons, 
         :label => "Where is your principle residence?",
         :item_wrapper_class => 'inline'

Upvotes: 2

Related Questions