Rails Simple Form Bootstrap Radio Buttons

0
votes

I am using simple form and bootstrap with my rails 4 app.

I'm becoming so frustrated with this that I just can't figure out something that should be 'simple'.

I am trying to make my radio buttons display:block. Instead, the text is all inline and squished up on top of each other because the container is too narrow to fit it all in on one line.

My form element is:

    <%= f.collection_radio_buttons :public, [[true, 'Yes, anyone can view this project'] ,[false, 'No, I would like to invite specific recipients']], :first, :last,  {style:'display:block', class: "response-project"}  %>

I have also tried:

Neither of these work to disable the formatting that either Simple Form or Bootstrap is imposing. I have other form elements that are radio buttons that I want to remain display:inline. I can see from my google inspect element, that there is a label.collection_radio_buttons tag on the form element. I didn't create that and I can't find it anywhere in the css files. it might be an import from bootstrap or a part of the simple form styling but I don't know how to disarm it from my form element.

Can anyone help?

Thank you

1
cssruby-on-railstwitter-bootstrapsimple-form
Finally found an answer. I didn't realise I needed to write an item wrapper class with styling as follows:.fixradio { display: block; input[type=radio] { margin: 0px 5px 0px 5px; display: inline; } label.radio { margin-right: 5px; } } - Mel

1 Answers

0
votes

If you want your CSS to work you have to user input_html or label_html. So it would be something like this:

<%= f.collection_radio_buttons :public, [[true, 'Yes, anyone can view this project'] ,[false, 'No, I would like to invite specific recipients']], :first, :last,  :input_html => {style:'display:block', class: "response-project"}  %>

*label_html is to affect only the label div Anyway you should read the doc https://github.com/plataformatec/simple_form under the 'Usage' section. Hope this helps.