CSS styling on rails with Simple Form for Bootstrap

Question

I am using simple form for bootstrap in my rails app. I am trying to figure out how to style radio buttons in my form. The radio buttons for Yes and No are right on top of each other (and very close to the button field). I'd like to add padding to each segment (so space in between the button and the label and then more space between the two options.

I have tried this (to see if I can even force CSS styling into my form. It isn't working at all (the text isn't even changing the font-weight - which is my test to see if it works).

<%= f.collection_radio_buttons :project_image, [[true, 'Yes'] ,[false, 'No']], :first, :last, {},  {:class => "create project"}  %>

I have a css.scss file for projects with this class defined:

.createproject {
  font-weight: normal;
  padding-right: 20px;
}

My first question is how to I add CSS styling to Simple Form components (yes I have read the Simple Form documentation and I can't figure out the answer from that) and then, how do I add padding to each component of the attribute (so there will be padding between the button itself and the label and then more padding between the yes and no options)?

Thank you

Please give a try by writing like this: <%= f.collection_radio_buttons :project_image, [[true, 'Yes'] ,[false, 'No']], :first, :last, {:class => "createproject"} %> — anusha
Hi Anusha, I tried it like that but it didn't work (no styling effects adopted), as well as adding {}, before it (as an empty placeholder for the :object field).I can't find any resources for styling simple form bootstrap forms. It's driving me crazy. Thanks anyway for trying. — Mel

MaximusDominus MaximusDominus · Accepted Answer · 2014-08-25T10:51:11

First, change your CSS class from 'create project' to 'create-project'

Then try something like this:

.create-project {
  font-weight: normal;
  padding-right: 20px;

  input {  
    margin: 5px 5px 0px 5px;
  }

  label {
    margin-right: 20px;
  }
}

To style just the radio buttons (and not all the inputs and labels in the form), you can do something like this:

.create-project {
  font-weight: normal;
  padding-right: 20px;

  input[type=radio] {  
    margin: 5px 5px 0px 5px;
  }

  label.radio {
    margin-right: 20px;
  }
}

It sounds like you might not be using your browsers CSS editing tools to adjust element styling (F12, or right click -> inspect element). This tool should give you insight into how simple_form_for structures the DOM.

CSS styling on rails with Simple Form for Bootstrap

2 Answers