How to prevent simple_form from applying default label to a custom wrapper?

Question

I am using SimpleForm + Bootstrap. I needed to add a <i></i>tag immediately after checkbox inputs, as follows:

<div class="form-group">
  <div class="checkbox">
    <label class="checkbox">
      <input type="checkbox" >
      <i></i>
      Label Text
    </label>
  </div>
</div>

So i modified the initializer

#initializers/simple_form_bootstrap.rb
config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly

  b.wrapper tag: 'div', class: 'checkbox' do |ba|
    ba.wrapper tag: 'label' do |bb|
      bb.use :input
      bb.wrapper tag: 'i' do |baa|
      end
      bb.use :label_text
    end
  end

  b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
  b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
end

But this is inserting an extra label tag

<div class="form-group">
  <div class="checkbox">
    <label>
    <label class="checkbox">
      <input type="checkbox" >
      <i></i>
      Label Text
    </label>
    </label>
  </div>
</div>

label.checkbox is the default label applied by simple_form. i.e., via config.boolean_label_class = 'checkbox'. So it looks like I can remove my custom label wrapper.

b.wrapper tag: 'div', class: 'checkbox' do |ba|
  # ba.wrapper tag: 'label' do |bb|
    bb.use :input
    bb.wrapper tag: 'i' do |baa|
    end
    bb.use :label_text
  # end
end

But then the label only surrounds the input.

<div class="form-group">
  <div class="checkbox">
    <label class="checkbox">
      <input type="checkbox" >
    </label>
    <i></i>
    Label Text
  </div>
</div>

I have tried enabling and disabling inline_label. I am using a fresh configuration file containing the default simple_form wrappers. The only modification is as above.

Why is Simple_Form applying a label to the input, when use label_input is not being called?

How do I configure simple_form to wrap the input, <i> tag and label text with the label?

Andy Harvey Andy Harvey · Accepted Answer · 2016-03-24T02:24:51

This caused me a lot of headache trying to figure, but in the end there was a simple fix.

For the benefit of anyone else who runs into a similar problem, make the following changes in your initializer

#simple_form.rb

# disable the default :nested boolean style
# and enable :inline
config.boolean_style = :nested
config.boolean_style = :inline

After this change, my custom wrapper behaved as expected with no additional elements "magically" appearing.

How to prevent simple_form from applying default label to a custom wrapper?

1 Answers