IE11 Not enough width for the label in some cases

[fabianpiau]

The plugin is working but the size is quite big for some labels. It is not the case for other browsers.

See the official examples: http://bootstrapswitch.com/examples.html

For some reason 'ON' takes too much space with IE11, I manually change the width to 46px and the switch looks good again.

It was fixed to 45px but not enough, it is 44px with Firefox and it works fine. The computation of this dynamic value needs to be adapted to IE 11.

[jbajou]

Experiencing the same issue on our side with IE11 and IE10. Any fix would be appreciated.

[MRJBGO]

I have the same problem with IE11 on the OFF part. It seems that the font we use is slightly bigger, so if I force 13px in this css property : ".bootstrap-switch .bootstrap-switch-label", it works ...

[fabianpiau]

Yes I have added this ugly quick fix hack, font size 13px was not enough in my case, I used 12px.

/** Hack ie 10 and > **/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-label {font-size:12px}
}

[jbajou]

Any idea when a fix will be released ?

[xiaolongWangDev]

Run into the same issue today. overriding the following works for me. The content was set to "\200b"

.bootstrap-switch span::before {
    content: normal;
}

[mobilutz]

@xiaolongWangDev Do you have any issues with this change? We are thinking about implementing this as well, but it seems that the \200b zero width whitespace was added intentionally: https://github.com/Julusian/react-bootstrap-switch/commit/bbd9754b0cebb82aeb1724ca86c79529e4a7b9df

[razi241]

While digging into same issue I found using blank space HTML Code " " helped. (ampersand#160;) • I had to make checkbox adhere to col-md-2 size • I had to keep labels in one line in contrast to above shown snapshots where ON and OFF moved to two rows. • I tried different tweaks like: //$("#controlId").bootstrapSwitch({ "handleWidth": "110", "labelWidth": "110" });

Solution worked for me • Surround label text e.g. "Repeat" as shown with above HTML code • When left enabled side button label is sized to appropriate bootstrap width, the right disabled side's label length doesn't matter

Snap attached,