simple_form_for rails radio button inline

trev9065 picture trev9065 · Apr 3, 2012 · Viewed 31.9k times · Source

I am trying to get my buttons to display inline and also have a default value because it can't be blank. I am usingplataformatex/simple_form and bootstrap.

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, style: "display:inline", default: true

It is rendering this:

<span>
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>    
</span>
<span>
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

It is clear that the style: is not working properly but I am not sure what will work.

Following another suggestion I added

.radio_buttons { display:inline; }

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, :item_wrapper_class => 'radio_buttons', :default => true

And got:

<span class="radio_buttons">
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>
</span>
<span class="radio_buttons">
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

Just another note that the default value still is not working.

Answer

flynfish picture flynfish · Apr 3, 2012

If you want them inline, you need to give the labels the inline class by doing: :item_wrapper_class => 'inline'

Here is an example using your code:

= f.input :is_private, 
          :collection => [[true, 'Private'], [false, 'Public']], 
          :label_method => :last, 
          :value_method => :first,
          :as => :radio_buttons, 
          :item_wrapper_class => 'inline',
          :checked => true

EDIT: I just realized that my answer was more specific to simple_form + bootstrap, since bootstrap already has styles defined when giving the label's the inline class. You should be able to use my example though, it will just take some more work on your end in creating your custom css.