user1175969 user1175969 - 3 months ago 7
CSS Question

Place radio button's label next to the button

I have the following radio button in my view:

<%= f.label :gender %>
<%= f.radio_button :gender, true %> Male
<%= f.radio_button :gender, false %> Female

The layout looks like this (each element is in a new row):

  • radio button

  • Male

  • radio button

  • Female

How do I make each of the above elements to appear next to each other, in the same row?


Like @kumar mentioned, you should be able to do it this way:

<%= label_tag 'male', class: 'radio-inline' do %>
  <%= f.radio_button :gender, true %>
<% end %>

<%= label_tag 'female', class: 'radio-inline' do %>
  <%= f.radio_button :gender, false %>
<% end %>

You should also check out the collection_radio_buttons, I guess you should be able to use it for this too, not totally sure of this though:

<%= f.collection_radio_buttons :gender, [['male', true], ['female', false]], :last, :first %>