Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
Will get rid of it. This was added to make the modals work more responsively, so you could scroll down and see a modal if the screen was too short. It also stops the background from being scrollable while a modal is up. If you don't need that functionality, then you can use that css I posted.
Some more info: They are setting .modal-open on the body, which prevents all scrolling on the body and hides the body scrollbar. Then, when the modal comes up it has the dark background that takes up the whole screen, and that has overflow-y: scroll which forces the scrollbar to come back so if the modal extended passed the bottom of the screen you can still scroll the dark background and see the rest of it.
Fixing the shifting left issue is easily done using CSS alone.
.modal-open[style] {
padding-right: 0px !important;
}
You're just overwriting an inline style that exists in the code. I am using mine in a WordPress build and the inline style was being applied to the body. Looked like this:
<body class="home blog logged-in modal-open" style="padding-right: 15px;">
Hope this helps someone!
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
.modal-open[style] {
padding-right: 0px !important;
}
Thanks to ben and cjd.
The above code seems to work for me.