CODEWITHSUNDEEP
cssruby-on-railsformstwitter-bootstrapsimple-form
trev9065
trev9065

Reputation: 3501

simple_form_for rails radio button inline

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.

Upvotes: 23

Views: 34809

Answers (6)

yanyingwang
yanyingwang

Reputation: 137

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

Upvotes: 0

Ben
Ben

Reputation: 695

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:

The above yields this result

Upvotes: 0

Josh
Josh

Reputation: 5721

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

Upvotes: 2

Jenny Lang
Jenny Lang

Reputation: 401

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. ;)

Upvotes: 1

flynfish
flynfish

Reputation: 5867

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.

Upvotes: 58

Arpit Vaishnav
Arpit Vaishnav

Reputation: 4780

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)

Upvotes: 2

Related Questions