radio button layout broken when using simple_form with bootstrap.

[akikumon]

probably 'form-control' class does bad things.
so now I using ":wrapper => :vertical_radio_and_checkboxes" option.

I hope fix it.

thanks.

[zmbacker]

Please tell me what's the version of your bootstrap. I have test radio button with bootstrap 3 and there is no problem.

[akikumon]

Sorry for my late reply.

I use ver.3.3.1 bundling via rails-assets.
also simple_form ver.3.1.0.rc2 using.

I encountered on Chrome 38.0.2125.111 and Mac-Yosemite. Is depends on my environment?

[zmbacker]

Can you paste the html code generate by simple form radio button ?

Thank you!

[KevinBongart]

Just had the same issue. Using enum_help 0.0.12, simple_form 3.1.0 and bootstrap-sass 3.3.1.0:

class Integration < ActiveRecord::Base
  enum threshold: [:all_alerts, :critical_alerts, :disabled]
end

<%= f.input :threshold, as: :radio_buttons %>

gives me:

<div class="form-group enum_radio_buttons optional integration_threshold">
  <label class="enum_radio_buttons optional control-label">Threshold</label>
  <span class="radio radio radio">
    <label for="integration_threshold_all_alerts">
      <input class="enum_radio_buttons optional form-control" type="radio" value="all_alerts" checked="checked" name="integration[threshold]" id="integration_threshold_all_alerts">
      all_alerts
    </label>
  </span>
  <span class="radio radio radio">
    <label for="integration_threshold_critical_alerts">
      <input class="enum_radio_buttons optional form-control" type="radio" value="critical_alerts" name="integration[threshold]" id="integration_threshold_critical_alerts">
      critical_alerts
    </label>
  </span>
  <span class="radio radio radio">
    <label for="integration_threshold_disabled">
      <input class="enum_radio_buttons optional form-control" type="radio" value="disabled" name="integration[threshold]" id="integration_threshold_disabled">
      disabled
    </label>
  </span>
</div>

@akikumon's right. The issue is caused by the .control-label class on the input elements, and using f.input :threshold, as: :radio_buttons, wrapper: :vertical_radio_and_checkboxes fixes it.

<div class="form-group enum_radio_buttons optional integration_threshold">
  <label class="enum_radio_buttons optional control-label">Threshold</label>
  <span class="radio radio radio">
    <label for="integration_threshold_all_alerts">
      <input class="enum_radio_buttons optional" type="radio" value="all_alerts" checked="checked" name="integration[threshold]" id="integration_threshold_all_alerts">
      all_alerts
    </label>
  </span>
  <span class="radio radio radio">
    <label for="integration_threshold_critical_alerts">
      <input class="enum_radio_buttons optional" type="radio" value="critical_alerts" name="integration[threshold]" id="integration_threshold_critical_alerts">
      critical_alerts
    </label>
  </span>
  <span class="radio radio radio">
    <label for="integration_threshold_disabled">
      <input class="enum_radio_buttons optional" type="radio" value="disabled" name="integration[threshold]" id="integration_threshold_disabled">
      disabled
    </label>
  </span>
</div>

[pwim]

As mentioned above, this issue is a simple_form one, not an enum_help one. See heartcombo/simple_form#886 for details. I'd recommend closing the issue.

[akikumon]

@pwim
Sorry for my too lazy reply.

Ok, I'll try your recommendation.
Now I close this issue.

Thank you.