4

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

Raas Masood
  • 1,475
  • 3
  • 23
  • 61
  • Using your code, I cannot reproduce the problem. Are you sure the paths to your CSS and JS files are correct? What specifically goes wrong in Chrome? – showdev Apr 10 '15 at 18:28
  • yes it goes wrong in chrome only – Raas Masood Apr 10 '15 at 18:38
  • i have added image to the question. it is even happening if i simple download the bootstrap-switch code from the site. create a new empty web app add the entire thing and hit preview in browser. same result in the case of chrome. – Raas Masood Apr 10 '15 at 18:44
  • That's odd. Sorry, I still can't reproduce the problem. Maybe an old version of Chrome or Bootstrap? I see a [similar issue here](https://github.com/nostalgiaz/bootstrap-switch/issues/124), but it appears to have been caused by some conflicting CSS, which does not seem possible in your case. – showdev Apr 10 '15 at 18:49
  • did you tried downloading code form the the switch site ? my chrome is updated though. – Raas Masood Apr 10 '15 at 18:55
  • this only happens when i run it via VS (view in browser option) if i open it otherwise its fine. – Raas Masood Apr 10 '15 at 18:56
  • @RaasMasood we are running into this problem for our site, only a two users are experiencing it and we can't reproduce either. They also have the issue in Chrome, but not IE. Were you able to resolve? The version of chrome doesn't seem to matter, Bootstrap-switch 3.3.2, Bootstrap 2.3.2. The zoom (in the answer below) didn't seem to have any impact for us – futbolpal Aug 17 '16 at 14:37

4 Answers4

6

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

Soturi
  • 1,486
  • 1
  • 14
  • 30
0

I ran into a similar problem where my bootstrap switch styling looked completely wrong (extra space above the toggle switch), and it turned out my issue was I had included the bootstrap-switch css and js files for the wrong bootstrap version. My web application uses bootstrap 3.3.7, and I accidentally used the bootstrap-switch files for bootstrap 2, instead of 3. As soon as I swapped the files, everything styled correctly for me.

zeyuhao
  • 1
  • 1
0

I resolved the issue forcing to use an initial width, just adding this css:

.bootstrap-switch-handle-off {
    width: 42px;
}
Ivan Enrique Garcia Cordero
  • 1
  • 1
-1

i resolved the problem with:

/* To resolve bootstrap switch Chrome compatibility issue */
.bootstrap-switch-container {
    width: 48px;
}
Alessio Mugnaioni
  • 1