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

This is a reported issue to bootstrap: https://github.com/twbs/bootstrap/issues/9855

And this is my temporary quick fix and it's also work using fixed top navbar, only using javascript. Load this script along with your page.

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

Here is the working example: http://jsbin.com/oHiPIJi/64

Answer 2

In my case, the body tag already specify overflow:hidden.

When modal dialog opens, it also add padding-right:17px; to body.

My code here

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

Answer 3

For Bootstrap version 3.2.0 this lines in css file fill fix the error:

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

Solution found here

Answer 4

None of the items in this page worked for me in version 3.3.4 and 3.3.5 Adding this CSS has solved the problem for me.

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

Answer 5

When the bootstrap modal opens then .modal-open class is set to body tag. In this tag overflow:hidden is set. we have to change this. Add the below code in your CSS.

<style>
body.modal-open {
    overflow: visible !important;
}
</style>

Reference :- How to fix Bootstrap modal background scroll to top

Answer 6

As of Bootstrap 3.3.2 the behavior appears to be that the scroll bars are removed when the dialog is shown and Bootstrap adds some right padding to the body element to compensate for the space previously taken up by the scroll bar. Unfortunately this doesn't prevent the screen shift, at least in modern versions of Chrome, IE, Firefox or Safari. None of the fixes here completely fix this issue but combining the answers from ben.kaminski and part of the answer from cjd82187 resolves the issue with only CSS:

/* removes inline padding added by Boostrap that makes the screen shift left */
.modal-open[style] {
    padding-right: 0px !important;
}

/* keeps Bootstrap from removing the scrollbar if it's there */
.modal-open {
    overflow: auto;
}

As mentioned by ben.kaminski, the code was added to Twitter Bootstrap so you could scroll to bring the modal into view if it's beyond the bottom of the screen. To retain that functionality you can wrap the CSS solution in a media query so it only applies to large viewports, something like this:

@media (min-width: 992px) {         
    .modal-open[style] {
        padding-right: 0px !important;
    }

    .modal-open {
        overflow: auto;
    }   
}