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:

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

Answer 1

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]
%>

Answer 2

Not sure of the exact thing, but there is something called order which can be assigned which tag to be displayed first e.g. [:label, :input] and also inlining may help here.

Answer 3

Have you tried to simply create or sort the collection in the order which you want?

Somethink like this :

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

Obviously, this is not the better solution. You should create the list in the right order.