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

if anyone happens to be using react-bootstrap the solution is just a bit more complex because react-bootstrap applies inline styles to the body element to manipulate the overflow and padding styles. This means you must override those inline styles with !important

body.modal-open {
  // enable below if you want to additionally allow scrolling with the modal displayed
  // overflow: auto !important;

  // prevent the additional padding from being applied
  padding: 0 !important;
}

NOTE: if you do not enable scrolling (i.e. make the scrollbar visible) by uncommenting the overflow style, then your page content will appear to shift over by the scrollbar width (if the scrollbar was previously visible that is).