simple_form_for rails radio button inline

Question

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 1

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.

Answer 2

You can try

f.collection_radio_buttons :options, [[true, 'Yes'] ,[false, 'No']], :first, :last ,:style =>"display:inline", :default => true

Not so sure which gem you use for simple form , but This is the source or a reference on which you can try

collection_radio_buttons(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)

Answer 3

Using Simple Form with Bootstrap 3 you can use the radio class along with the item_wrapper_class and item_wrapper_tag options.

= f.collection_radio_buttons :sort, [[foo,bar],[foo,bar],
  :first, :last,
  item_wrapper_class: :radio,
  item_wrapper_tag: :div

Answer 4

The above answer might have not worked because I'm not using Bootstrap. But there are other ways. I slapped a div with class="radio-buttons" around the buttons and label manually. Then I added this to my style sheet (SASS):

.radio-buttons {
  margin: .5em 0;
  span input {
    float: left;
    margin-right: .25em;
    margin-top: -.25em;
  }
  #this grabs the MAIN label only for my radio buttons 
  #since the data type for the table column is string--yours may be different
  label.string { 
    margin-bottom: .5em !important;
  }

  clear: both;
}

.form-block {
  clear: both;
  margin-top: .5em;
}

 .radio-buttons span {
  clear: both;
  display:block;
 }

This will make the radio buttons inline on ALL frameworks, though this is tweaked to look the best for Zurb Foundation. ;)

Answer 5

A simple solution:

Add a class to the item wrapper. This class can be whatever you choose. I'm using 'inline' in the example below:

form.input :my_field, as: 'radio_buttons' wrapper_html: {class: 'inline'}

Then define some CSS which only applies to radio button groups (and only the actual radio buttons, not the item label):

input.radio_buttons.inline label.radio{
  display: inline-block;
}

Here's an example of what this yields:

Answer 6

Just for someone who using zurb foundation with simple form's chekbox came here:

slim view:

= f.input :company_stages, as: :check_boxes, required: true

scss:

// simple-form checbox
.checkbox {
    margin-right: 20px;
    display: inline-block;
}