Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Width calculation issue #624

Open
jainabhishek14 opened this issue Mar 6, 2017 · 10 comments
Open

Width calculation issue #624

jainabhishek14 opened this issue Mar 6, 2017 · 10 comments

Comments

@jainabhishek14
Copy link

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:
screenshot from 2017-03-06 19-02-15

Chrome:
screenshot from 2017-03-06 19-04-51

@makaronnik
Copy link

makaronnik commented Mar 20, 2017

It's the same for me when use Bootstrap Modal. In Google Chrome and Google Chrome Mobile
1
screenshot_2017-03-20-23-53-33

@cyrillegin
Copy link

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.

screenshot

@ickbinhier
Copy link
Contributor

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

@jameshoward
Copy link

jameshoward commented Aug 2, 2017

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
Copy link

driade commented Aug 28, 2017

@jameshoward Confirmed the workaround works with bootstrap 3.3.7

@Quix0r
Copy link

Quix0r commented Nov 20, 2017

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

@losttheplot
Copy link

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
Copy link

Quix0r commented Nov 21, 2017

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
Copy link

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

@superbazza
Copy link

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants