Rails Simple Form CSS - space between input elements

Question

I have a rails 4 app with bootstrap and Simple Form.

I have followed the sample apps in Simple Form - but none of my formatting is coming out in similar style to those in the sample (despite using the same code).

Does anyone know how to put space between the label and the field? I have tried to add padding but it adds it beneath the field rather than beneath the label, but above the field.

For example, I have:

   <div class="question-data">
         <%= f.input :prim_sec, label: 'What sort of data do you want?', collection:     ["Primary", "Secondary", "Both" ], prompt: "Choose one" %> </div>

And this CSS for question-data:

.question-data {
  font-weight: bold;
  padding-bottom: 10px;
  padding-top: 20px;
  font-family: 'Quicksand', sans-serif;
  color: #7F042D;
  font-size: 17px;
}

Any thoughts on how to add styling to one part of the input separately from another?

Thank you

userden userden · Accepted Answer · 2014-09-22T05:20:10

You could perhaps try:

<div class="question-data">
    <%= simple_form_for(@example, :defaults => { :input_html => { :class => "my-class-name" } }) do %>
          <%= f.input :prim_sec, label: 'What sort of data do you want?', collection: ["Primary",   "Secondary", "Both" ], prompt: "Choose one" %>
    <% end %>
</div>

Rails Simple Form CSS - space between input elements

1 Answers