Bootstrap-switch-rails gem not working

Question

I'm trying to use bootstrap-switch-rails on my Rails project, but I can't make it work. I've been mostly following this tutorial.
This is what I tried so far.

Added this in my Gemfile

gem 'bootstrap-switch-rails', '~> 3.0.0'

Added this in the top of my app/assets/stylesheets/custom.scss

@import "bootstrap";
@import "bootstrap3-switch";
@import "bootstrap-sprockets";

/* Rest of the file omitted */

This is my application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-switch
//= require_tree .

My application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 *= require bootstrap-switch3

And finally, the form where I want to use the switch:

<% content_for :head do %>
  <script type="text/javascript">
  $(function() {
    $("input:checkbox").bootstrapSwitch();
  });
  </script>
<% end %>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@consultant) do |f| %>
      <%= render 'consultants/consultant_error_messages' %>

      <%= f.label :identifier %>
      <%= f.text_field :identifier, class: 'form-control' %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :first_name %>
      <%= f.text_field :first_name, class: 'form-control' %>

      <%= f.label :last_name %>
      <%= f.text_field :last_name, class: 'form-control' %>

      <%= f.label :disabled, "Habilitar/Deshabilitar" %>
      <%= f.check_box :disabled, :data => { 
        :size=>'small', 'on-color'=>'success', 'on-text'=>'Habilitar', 'off-text'=>'Deshabilitar' 
      } %>

      <%= f.submit "Guardar", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

The checkbox is being shown as a regular checkbox, instead of a switch.
Any ideas on what should I be missing?
Thanks in advance.

Try to `require bootstrap3-switch` only in the application.css remove it from the **custom.scss** — shrikant1712, Jul 28 '16 at 04:42

score 0 · Answer 1 · edited May 23 '17 at 12:34

0

Try to replace require bootstrap-switch3 with require bootstrap3-switch in your application.css

Also try executing $("input:checkbox").bootstrapSwitch(); in the console to see the output.

Another user solved the issue writing the HTML instead of using the one generated by Rails: rails 4 : change state issue with Bootstrap Switch

edited May 23 '17 at 12:34

Community

1
1

answered Aug 22 '16 at 18:32

fsinisi90

1,138
1
16
45

Bootstrap-switch-rails gem not working

1 Answers1