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

HtmlTwitter BootstrapResponsive DesignTwitter Bootstrap-3

Html Problem Overview

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. It does the same when you close it.

How can I make it so that it just open and closes with no browser scroll bar interaction. I have seen posts on stack where people were having problems, but I can't find an answer specific to my problem, so if someone else has made this request and someone knows about it and wants to link me to it, I'd appreciate it. I've searched for about 2 hours for this before posting up.

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

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!

Solution 3 - Html

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

Solution 4 - Html

this is what i found in github when i search about this problem and for me it works fine

js:

    $(document).ready(function () {
    $('.modal').on('show.bs.modal', function () {
        if ($(document).height() > $(window).height()) {
            // no-scroll
            $('body').addClass("modal-open-noscroll");
        }
        else {
            $('body').removeClass("modal-open-noscroll");
        }
    });
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeClass("modal-open-noscroll");
    });
})

css use this css if you have nav-fixed-top and navbar-fixed-bottom:

body.modal-open-noscroll
{
    margin-right: 0!important;
    overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
    margin-right: 0!important;
}

or user this css if you have navbar-default

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}

Solution 5 - Html

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

Solution 6 - Html

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;
}

Solution 7 - Html

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;
}

Solution 8 - Html

to solve the problem causing the page to shift to the right

html, body{
  padding: 0 !important;
}

Solution 9 - Html

$('body').on('show.bs.modal', function () {
    if ($("body").innerHeight() > $(window).height()) {
	    $("body").css("margin-right", "17px");
	}
}); 

$('body').on('hidden.bs.modal', function (e) {
    $("body").css("margin-right", "0px");
});

This little fix simulates the scrollbar when the modal is shown, adding a margin-right to the body.

Solution 10 - Html

> This solution work for me!!!!

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


.modal-open[style] {
padding-right: 0px !important;
}

Solution 11 - Html

None of the above worked and others hours of research. But the following code worked perfect with just a bit of CSS. The above would not remove inline style padding:17px; with JS or jquery, I could add 0 padding, but had no effect.

.modal-open {
  padding-right: 0px !important;
  overflow-y: scroll;
  width: 100%;
  display: block;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  outline: 0;
  padding-right: 0 !important;
}

Solution 12 - Html

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

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

Solution 13 - Html

I had this problem with Bootstrap 4. I have html { overflow-y: scroll; } and I think it is a problem but after add .modal-open[style] { padding-right: 0px !important; } to my local css file, everything work perfect!

.modal-open[style] { 
    padding-right: 0px !important;

}

Solution 14 - Html

html, body{
    padding-right: 0px !important; 
    position: relative!important;
}

try this code really it's working

Solution 15 - Html

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
}

Solution 16 - Html

My page needed a modified version of Agni Pradharma's code to keep it from shifting when the modal was shown. I have a fixed nav header and some pages with scroll, some without. Demo here: http://jsbin.com/gekenakoki/1/

I used both the css:

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

and the script:

$(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-left', scrollbarWidth); 
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-left', 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);
};

Solution 17 - Html

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;
	}	
}

Solution 18 - Html

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

Solution 19 - Html

Implemented this simple solution

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}

Solution 20 - Html

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.

Solution 21 - Html

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

Solution 22 - Html

My Jquery solution:

var nb = $('nav.navbar-fixed-top');
$('.modal')
    .on('show.bs.modal', function () {
        nb.width(nb.width());
    })
    .on('hidden.bs.modal', function () {
        nb.width(nb.width('auto'));
    });

Solution 23 - Html

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

Solution 24 - Html

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%;
}

Solution 25 - Html

For Bootstrap 5, this worked for me

body.modal-open {
  overflow-y: inherit;
}
Categories
Recommended Html Solutions
Recommended Twitter Bootstrap Solutions
Recommended Responsive Design Solutions
Recommended Twitter Bootstrap-3 Solutions

Previous Solution:

du counting hardlinks towards filesize?

LinuxDiskspaceDu

Next Solution:

Playing mp3 song on python

PythonAudioMp3

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDaniel WhiteView Question on Stackoverflow
Solution 1 - Htmlcjd82187View Answer on Stackoverflow
Solution 2 - Htmlben.kaminskiView Answer on Stackoverflow
Solution 3 - HtmlTony SView Answer on Stackoverflow
Solution 4 - Htmluser4314713View Answer on Stackoverflow
Solution 5 - HtmlAgni PradharmaView Answer on Stackoverflow
Solution 6 - HtmlDizzleView Answer on Stackoverflow
Solution 7 - HtmlabxstractView Answer on Stackoverflow
Solution 8 - HtmlFemi-oke AnthonyView Answer on Stackoverflow
Solution 9 - Htmlhect0r90View Answer on Stackoverflow
Solution 10 - HtmlJigar BhattView Answer on Stackoverflow
Solution 11 - HtmlCorey BView Answer on Stackoverflow
Solution 12 - HtmlAnurag PhadnisView Answer on Stackoverflow
Solution 13 - HtmlSeldo97View Answer on Stackoverflow
Solution 14 - Htmlbeast.nilView Answer on Stackoverflow
Solution 15 - HtmlKayJView Answer on Stackoverflow
Solution 16 - HtmlknighterView Answer on Stackoverflow
Solution 17 - HtmlclavView Answer on Stackoverflow
Solution 18 - HtmlSudhanshu sharmaView Answer on Stackoverflow
Solution 19 - HtmlLonareView Answer on Stackoverflow
Solution 20 - HtmlPartho63View Answer on Stackoverflow
Solution 21 - HtmlpjsView Answer on Stackoverflow
Solution 22 - HtmlGoloveichukView Answer on Stackoverflow
Solution 23 - HtmlTheo OrphanosView Answer on Stackoverflow
Solution 24 - HtmlBartandoView Answer on Stackoverflow
Solution 25 - HtmlAldrin JensonView Answer on Stackoverflow