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.         


        

Answer 1

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 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

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 4

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 5

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;
}

Answer 6

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: