Width calculation issue

[jainabhishek14]

There is an issue while calculating width of the container on chrome 53.0.2785.143 (64 bit) browser. (not sure about other versions). But it is working fine on firefox except random times. Screenshot attached. Firefox:

Chrome:

[makaronnik]

It's the same for me when use Bootstrap Modal. In Google Chrome and Google Chrome Mobile

[cyrillegin]

I'm getting the opposite problem, the switch width seem s to extend the entire width of the container that it is in. Again, only in chrome, works fine in firefox and safari.

[ickbinhier]

this problem is in version 3.3.4 and in master. version 3.3.3 is correct.

[jameshoward]

3.3.4 has an issue for our project too. The change to display: table-cell and vertical-align: middle on the handles and label meant that even though the width was being calculated correctly, it would not apply in the browser because table cells can shrink.

Our workaround was to add this to our CSS:

.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
    display: inline-block;
    vertical-align: baseline;
}

[driade]

@jameshoward Confirmed the workaround works with bootstrap 3.3.7

[Quix0r]

Not working here. The whole label is collapsing: screenshot - Please click the second image.

[losttheplot]

We had the same problem after an update from 3.3.3 to 3.3.4 - element widths corrupted (Chrome 62.0.3202.94). I can confirm that the workaround suggested by @jameshoward fixes our problem. Clearly a proper fix is needed.

[Quix0r]

I had a .bootstrap-switch-label with text and image. It only calculates the width correctly when the image has a fixed width, max-width for example is not working, causing the switch to be wrong calculated.

[superbazza]

Oddly, I am seeing this as an intermittent problem. Sometimes it renders properly - other times its completely broken.

[superbazza]

Further to previous comment: With zero code changes between them, I see it broken in live - and rendering fine in staging env - and rendering fine locally. It is therefore impossible to figure out how to fix it if I cannot reproduce locally :(

Whiskey Tango Foxtrot ?