Rails simple_form - Align radio buttons vertically

Question

I have the following code:

<%= simple_form_for @comment do |f| %>
    <%= f.input :comment, label: 'Phrase you would like to add:' %>
    <%= f.collection_radio_buttons :options, [[true, 'Positive'] ,[false, 'Negative']], :first, :last, label: 'Emotion' %>
<% end %>

This works fine, but the radio buttons in collection_radio_buttons are side by side. How can I stack the radio buttons vertically on top of each other?

Answer 1

There are two other options you can use.

Option 1:

Assign a css class to each item in the collection and apply styling accordingly.

<%= f.collection_radio_buttons :options, [[true, 'Positive'] ,[false, 'Negative']], :first, :last, label: 'Emotion', item_wrapper_class: :block_radio_button_collection %>

This wraps each item in the collection, i.e. each pair of label and radio button with the default wrapper tag and sets class="block_radio_button_collection" on them.

Then you'd need to add the style definition for the css class block_radio_button_collection in your css file.

.block_radio_button_collection {
  display: block;
}

Option 2:

Wrap each item in the collection with a block element e.g. div:

<%= f.collection_radio_buttons :options, [[true, 'Positive'] ,[false, 'Negative']], :first, :last, label: 'Emotion', item_wrapper_tag: :div %>

This changes the wrapper of each item in the collection i.e. each pair of label and radio button to div.

Answer 2

I remember running into the same issue. There probably is a better way to work around it but this worked for me:

<%= f.input :options, collection: [[true, 'Positive'], [false, 'Negative']], as: :radio_buttons, label: 'Emotion', label_method: :last } %>

Hope it helps.