Modify scrollbar check, stop static nav shift

[thcipriani]

• Modify check for scrollbar to account for IE10/11
• Stop static nav shift on modal open
• Fixes Open modal is shifting body content to the left #9855

Tested working:

• Debian 7/Iceweasel 17.0.10
• Debian 7/Chrome 32.0.1700.107
• Windows 7/IE 10
• Windows 7/Chrome 33
• OSX 10.9/Firefox 27.0.1

[cvrebert]

I feel like we'd have to add a bunch more special cases and/or support for the user adding their own special cases... 😱

[thcipriani]

These two classes are the only ones I've really seen cause a problem as far as base bootstrap and this solution is concerned.

User special cases should be handled via the show.bs.modal event.

[thcipriani]

@cvrebert do you think that the static-nav cases should handled elsewhere?

The change from inspecting window.innerHeight to checking window.innerWidth to denote the presence of scrollbars should fix the solution that's already out there while leaving the navbar-fixed-[whatever] alone (i.e., leaving them shifting right).

Would this pull request be better to just address the issue with IE10/11?

I'm really eager to see some fix roll so that I can update my own codebase.

[fat]

Would this pull request be better to just address the issue with IE10/11?

that's just what i was going to ask.

The fixed problem is actually just a rendering bug with chrome (asfaik) – works fine in firefox, etc.

[fat]

@thcipriani could you also squash your commits! thanks!

[thcipriani]

@fat squashed and focused only on IE10/11

[fat]

lgtm – thanks a lot

[cvrebert]

@fat So, we can merge this?

[fat]

yep, looks good to me

[eugenzaharia]

Version 3.2.0 keeps shifting my body to left, so I end up commenting
this.$body.addClass('modal-open') this.setScrollbar()
within modals.js

[thcipriani]

@eugenzaharia can you provide a jsfiddle micro example for what you're seeing, or, let me know if you're seeing it on http://getbootstrap.com/javascript/#modals

Also, can you provide your OS/Browser version combo for which you're having this issue.

Also, probably a good idea to open a new issue once you have those things to make management easier.

Thanks!

[ghost]

Having the same problem with 3.2 using chrome. Fixed it via

body.modal-open {
    padding-right: 0px !important;
}

[Gwi7d31]

@whoknowsit. Nice job. Confirmed fix with FF 34.0.5 and Chrome 39.0.2171.95 m when scrollbar is forced into page. Bootstrap version 3.2.0

[ghost]

Now, i use this:

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right: 0px !important;
    overflow-y: auto;
}

[jjwilliams]

@whoknowsit thanks - your previous fix works for me (with the overflow-y:auto). Adding all the navbar classes causes my navbar to jump.

This is a pesky ass little bug.

body.modal-open {
padding-right: 0px !important;
overflow-y: auto;
}

Version 39.0.2171.65 Built on Ubuntu 14.04, running on LinuxMint 17.1 (64-bit)

[ghost]

I guess, it depends on some factors, what's working and what not.