simple_form renders radio buttons incorrectly

Question

Using simple_form I render some radio buttons to select Gender on registration page.

code:

        = f.input :gender,
              :collection => gender,
              :as => :radio_buttons,
              :item_wrapper_class => 'inline'

This gives output like:

enter image description here

Is there a way to make the first radio button be behind Male and the 2nd radio button behind Female?

Have you checked that the html it produces is wrong? Because it looks like a styling issue to me. — Gerry
What's the content of the gender variable/method? Is it an array? — Wolfram Arnold

23inhouse 23inhouse · Accepted Answer · 2012-06-06T02:11:10

Here is a better solution than my original below.

From the code:

#   form_for @user do |f|
#     f.collection_radio_buttons(
#       :options, [[true, 'Yes'] ,[false, 'No']], :first, :last
#     ) do |b|
#       b.label { b.radio_button + b.text }
#     end
#   end

I think this is what you are looking for:

<%= f.collection_radio_buttons(
    :gender, [['Male', 'Male'], ['Male', 'Male']], :first, :last
  ) do |b|
    b.label { b.text + b.radio_button }
  end
%>

You can even add other helpers like image_tag in there too:

<%= f.collection_radio_buttons(
    :gender, [['Male', 'Male'], ['Male', 'Male']], :first, :last
  ) do |b|
    b.label { image_tag("#{b.text}.png") + b.radio_button }
  end
%>

This solution is not a normal custom component. This custom compontent inherits from CollectRadioButtonsInput instead of the normal CollectionInput class. I modified the 2 relevant methods.

Inside app/inputs/radio_buttons_left_label_input.rb

class RadioButtonsLeftLabelInput < SimpleForm::Inputs::CollectionRadioButtonsInput
  def input
    label_method, value_method = detect_collection_methods

    @builder.send("collection_radio_buttons",
      attribute_name, collection, value_method, label_method,
      input_options, input_html_options, &collection_block_for_nested_boolean_style
    )
  end

  protected

  def build_nested_boolean_style_item_tag(collection_builder)
    collection_builder.text.html_safe + collection_builder.radio_button.html_safe
  end
end

It can be used like this

<%= form.input :gender,
  :as => :radio_buttons_left_label,
  :collection => %w[Female Male]
%>

simple_form renders radio buttons incorrectly

3 Answers