Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems

Question

I am working on a site using Bootstrap 3.1.0.

You\'ll notice when the modal window opens, the browser scroll bar just disappears for a split second, then comes back.

Answer 1

Implemented this simple solution

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}

Answer 2

For Bootstrap-4.3.x use the following css:

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

/* if you have .navbar in your page then add padding-right for your .navbar (default is 16px) */
.modal-open .navbar {
    padding-right: 16px !important;
}

That's it. Nothing else is needed like: JavaScript code to add some .class in your body and then adding CSS codes to style them.

Answer 3

.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.

Answer 4

If you have fixed navbar and dont want to scroll body to top when modal is opened use this style

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

Answer 5

The best solution for me was use this settings. It works for web and mobile

.modal-open {
   overflow: hidden;
   position: absolute;
   width: 100%;
   height: 100%;
}

Answer 6

I fixed this issue by adding this code in my css file:

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