Bootstrap Switch showing two switches with Rails and Simple Form

Question

I'm using the Bootstrap Switch Gem with Ruby on Rails and the Simple Form Gem. As per the Bootstrap Switch instructions I've initialised the switch as follows:

$(document).ready(function() {
  $("[input='radio']").bootstrapSwitch();
});

However radio buttons are showing as two switches and not functioning correctly:

Whereas they should be displayed of course something like this:

What would be causing this? I'm using it for a checkbox and all works as expected.

HTML output of a radio buttons:

<span class="radio">
  <label for="client_high_profile_true">
    <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-inverse bootstrap-switch-id-client_high_profile_true bootstrap-switch-on bootstrap-switch-animate" style="width: 106px;">
      <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;"><span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">NO</span>
        <span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span><span class="bootstrap-switch-handle-on bootstrap-switch-success" style="width: 52px;">YES</span>
     <input class="radio_buttons optional" type="radio" value="true" name="client[high_profile]" id="client_high_profile_true">
   </div>
   </div>Yes
 </label>
</span>

<span class="radio">
  <label for="client_high_profile_false">
   <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-readonly bootstrap-switch-inverse bootstrap-switch-id-client_high_profile_false bootstrap-switch-animate bootstrap-switch-off" style="width: 106px;">
      <div class="bootstrap-switch-container" style="width: 156px; margin-left: 0px;"><span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">NO</span><span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
    <span class="bootstrap-switch-handle-on bootstrap-switch-success" style="width: 52px;">YES</span>
     <input class="radio_buttons optional" readonly="readonly" type="radio" value="false" checked="checked" name="client[high_profile]" id="client_high_profile_false">
  </div>
  </div>No</label>
  </span>

Appreciate any help thanks.

Go here and inspect the widgets: http://bootstrapswitch.com/examples.html - You're wrapper and container should be containing both parts of the toggle. Pay close attention to parents and children. — Adrianopolis, Jun 13 '17 at 19:46
Maybe the problem is due to using the Simple Form gem with it as that's what produces the wrapper and container for the buttons. I'm not sure how to go about altering how it outputs them. — DanRio, Jun 13 '17 at 19:52

Bootstrap Switch showing two switches with Rails and Simple Form

0 Answers0