Jeff Burghess Jeff Burghess - 5 months ago 19
CSS Question

(Rails) radio buttons not lining up with text

I want

ff.label
to line up with
ff.radio_button.
But right now my view has them extremely far apart and not lined up. Why?
enter image description here
I've added a css tag to this question in case it's a problem with css and not rails just in case.

this is my code:

<%= form_for([@user, @submitted_quiz]) do |f| %>
<%= f.hidden_field :quiz_id, :value => @quiz.id %>
<%= f.hidden_field :name, :value => @quiz.name %>

<% @quiz.questions.each do |question| %>
<div class = "questions" >
<%= f.label question.content %>

<%= f.fields_for (:submitted_answers) do |ff| %>

<%= ff.hidden_field :question_id, :value => question.id %>
<div class = 'options'>
<% question.answers.each do |answer| %>
<div class = 'radio'>
<%= ff.radio_button :content, answer.content %>
<%= ff.label :content, answer.content %>

</div>
<% end #answer.each do %>
</div>
<% end #fields_for (:submitted_answers) do %>

</div>
<% end #questions.each do %>


<%= f.submit %>
<% end #form_for %>

Answer

Put your radio button inside your label and try.

<div class="radio">
  <%= ff.label :content do %>
    <%= ff.radio_button :content, answer.content %>
    <%= answer.content %> <!-- this will make the text appear after the radio button -->
  <% end %>
</div>

Update:

Like this

<label>
  <input type="radio" ... /> 
  Foo
</label>

Here Foo will appear right after the radio button not before.