Search code examples
cssgoogle-chromebootstrap-switch

css style does not applied properly in chrome for bootstrap switch

I'm trying to turn a checkbox into a Bootstrap Switch. It works fine in IE, but it isn't styled properly in in Chrome. What's going wrong?

it is even happening if i simple download the bootstrap-switch code from the site. create a new empty web app in vs 2013 add the entire thing and hit preview in browser. (examples.html)

same result in the case of chrome. 

<html lang="en">
<head>
  <link href="content/template/css/bootstrap.min.css" rel="stylesheet">
  <link href="content/template/bootstrap-switch.css" rel="stylesheet">
</head>
<body>
  <input type="checkbox" name="my-checkbox" checked>
  <script src="Scripts/jquery-2.1.1.js"></script>
  <script src="scripts/js/bootstrap-switch.min.js"></script>
  <script>
     $(document).ready(function () {
        $("[name='my-checkbox']").bootstrapSwitch();
     });
  </script>
</body>
</html>

enter image description here

Solution

  • I had this issue as well, running Chrome 47 (current latest). I found that my page zoom level was set to 90%. After setting back to 100% zoom and a page refresh, the issue was resolved.

    Interestingly, the style width was different for the toggle panels with the different zoom levels.

    <span class="bootstrap-switch-handle-off">...
<span class="bootstrap-switch-label">...
<span class="bootstrap-switch-handle-on">...

    At 90% zoom (where problems occurred), each element had a width value of 32px in my rendering, where the parent container (class="bootstrap-switch-container") had a max width of 93px

    At 100% zoom, each element had a width value of 31px