CODEWITHSUNDEEP
ruby-on-railssimple-form
tkhobbes
tkhobbes

Reputation: 682

Rails simple_form: Prevent labels from wrapping input

I am unsure with some of the configuration options of simple_form in a Rails application: I am using the enum_help plugin https://github.com/zmbacker/enum_help and I display an enum as radio button options.

However the HTML generated wraps radio buttons inside the labels; I would like to have the inputs (radio buttons) first, then the labels. Current output:

  <!-- this is the "label" that seems to be reacting to b.label in the simple form initializer - see below -->
  <label class="enum_radio_buttons optional">Rating</label>
  <span class="radio radio radio">
    <label for="book_rating_favourite">
      <input class="enum_radio_buttons optional" type="radio" value="favourite" name="book[rating]" id="book_rating_favourite" />
      Favourite
    </label>
  </span>
  <span class="radio radio radio">
    ...
  </span>
  ...

Desired output:

  <label class="enum_radio_buttons optional">Rating</label>
  <span class="radio radio radio">
    <input class="enum_radio_buttons optional" type="radio" value="favourite" name="book[rating]" id="book_rating_favourite" />
    <label for="book_rating_favourite">
      Favourite
    </label>
  </span>
  <span class="radio radio radio">
    ...
  </span>
  ...

I am not quite sure what to do to change this behavior...

EDIT:

I tried to define a custom wrapper but that doesn't seem to work. The "label" is referring to the label of the full radio button group (edited code above for clarity), and so while I was able to change the order and have input first, and label second, the only thing that happened was that the title was BELOW the radio buttons.

Here's the relevant part of config/initializers/simple_form.rb; it seems that b.use :input simply renders the input nested within the individual label...

  config.wrappers :enum_radio,
   hint_class: :field_with_hint, error_class: :field_with_errors, valid_class: :field_without_errors do |b|
    # we need the radio button first, and then the label
    # the label should not wrap the button
    b.use :html5
    b.use :placeholder
    b.use :input

    # copied from :default wrapper
    b.use :hint,  wrap_with: { tag: :span, class: :hint }
    b.use :error, wrap_with: { tag: :span, class: :error }
  end

And here is how I try to use it in the form:

  <%= simple_form_for book do |f| %>
    <%= render 'shared/form_errors', form: f %>
    ...
      <div class="form-col">
        <%= f.input :rating, as: :radio_buttons, wrapper: :enum_radio %>
      </div>
    ...
  <% end %>

Upvotes: 0

Views: 547

Answers (1)

Chiperific
Chiperific

Reputation: 4686

EnumHelp yields to SimpleForm

So, you'll have to do some SimpleForm customization to achieve this.

Check out custom wrappers as a starting point.

Upvotes: 1

Related Questions