rails3, simple_form, twitter bootstrap: radio buttons break onto differnet lines

0
votes

My rails 3.1.3 app is using simple_form 2.0.1 and twitter_bootstrap_rails 2.0.3.

All my form elements looks fine except when I use a radio collection

= f.collection_radio_buttons :my_fieldname, [['x1', 'FOO'],
['x2', 'BAR'],
['x3', 'FOOBAR'],
['', 'None']], :first, :last

the radio buttons and labels are displayed vertically like this:

()
FOO
()
BAR
()
FOOBAR
()
None

instead of like this:

() FOO () BAR () FOOBAR () None

I have the "form-horizontal" class assigned to simple_form_for, and all the other form elements look fine.

Do I need a special class attached to the f.collection_radio_buttons?

3
ruby-on-railstwitter-bootstrapsimple-form
Are you familiar with Firebug or Chrome's Dev Tools? Your problem is probably in the CSS. Some element is probably display:block instead of display:inline. – nicholaides

3 Answers

5
votes

try this

<%= f.input :save_it, :collection => [['Yes',true] ,['No', false]], :as => :radio_buttons, :item_wrapper_class => 'inline', :label => 'Save now?' %>
0
votes

if you model has an association, it is built in to simple_form to follow that association and generate the appropriate nested fields.

f.association :column, as: :radio_buttons

the collection_radio_buttons is a custom field generator and as such would need a wrapper written (under initializers) to handle the output correctly

0
votes

This didn't work at all for me. I just did it with CSS. I slapped a div with class="radio-buttons" around the buttons and label. 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. ;)