Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems
Solution 1
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 2
.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 3
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 4
.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 5
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;
}
Related videos on Youtube
Daniel White
I began my professional career in 2006 as a greenhorn in the printing industry. My father owned a large shop in Fort Worth and under his wing I learned the hard side of running your own business, sales and relationship building. Building upon my graphic design career I began to master software engineering, scalable infrastructure, data visualization, smart contract development and more. In the last 10 years I've done everything from freelance development, to working with major brands to plan, design, develop and iterate on websites and applications from basic Wordpress websites to SAAS platforms, custom API solutions, blockchain dapps and even my latest passion, smart contracts.
Updated on June 20, 2021Comments
-
Daniel White almost 3 years
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.
-
devius over 8 yearsApparently this issue was fixed in version 3.2.0 of Bootstrap.
-
cssyphus over 8 yearsApparently not (2016). Future Readers should sort answers by Votes as the accepted answer is not the best answer. See this answer and possibly also this one
-
arjs almost 8 yearsStill not fixed 3.3.6, so thanks for the heads up @gibberish!
-
lowtechsun about 7 yearsWorks just fine in 2017.
-
-
cjd82187 over 10 yearsYou may want to include that CSS in a media query for desktop only, so you have the better boostrap 3 styling for when you are on mobile.
-
Laxman almost 10 yearsthe page now doesnot shift to the left, but now we have more vertical scroll bars!!!.
-
empz almost 10 yearsWorks, but adds a second scroll bar.
-
slopapa over 9 yearsI also was having same issue in IE. It would add a padding-right style. It's likely because I'm forcing the vertical scrollbar. Regardless, this fixed it, thanks!
-
Cem Özer over 9 yearsI think this is not an actual answer and you posted because you are not able to comment yet. But please be patient.
-
DaniB over 9 yearsThanks Ben - this helped me too!
-
GhostRider about 9 yearsWorked for me but I had to change the margin-right to padding-right
-
lowtechsun about 9 yearsWorks just fine with the latest version of Bootstrap, tested in latest version Chrome, Firefox and Opera. Did not have a look at it with Safari or IE.
-
lowtechsun about 9 yearsMargin-right should not have a fixed pixel value as the scrollbar width varies from browser to browser.
-
Kunal about 9 yearsThe scrollbar width changes based on the browser zoom too. Should use this script in conjunction with a scrollbar size detection script like this
-
Brian Kates about 9 years@GhostRider: Thanks. I had to chance the margin to padding.
-
coggicc almost 9 yearsPerfect. Quick and easy. Thanks
-
tinmac almost 9 yearsPlus one for the fixed-top/fixed bottom fix, none of the other answers worked for this scenario.
-
Chris Trudeau over 8 yearsVery simple fix and it worked while the top two answers didn't, was trying to fix this for too long..
-
Aelys over 8 yearsExactly what I needed. That and this :
.modal { overflow: auto; } .modal-open { overflow: auto; } .modal-open[style] { padding-right: 0px !important; }
I was trying to fire a modal from another one and the shift was doubled. Thanks for your tip. -
DPac over 8 yearsThis combined with the overflow:auto fix above does the trick for me.
-
cssyphus over 8 years@FutureReaders ben.kaminski's answer, below,has a single-line css solution that should be the accepted answer.
-
GhostRider about 8 yearsWorked for me in 2016! Thanks
-
MSC almost 8 yearsNice one, Ben. Thanks.
-
arjs almost 8 years2016 and it works (when you also take overflow into account.) Thank you so much!
-
Al.G. almost 8 yearsWell, the snippet doesn't actually show anything. Add some colored blocks to show the effect of what you've given.
-
Sander Van Keer over 7 yearsAlthough this isn't the most beautifull way to fix it, it does work
-
Shaiju T over 7 yearsAlso add padding ,
.modal-open { overflow: auto; padding-right: 0px !important; }
as @ben.kaminski said, which gets rid of shifting left issue completely. Hope helps. -
Sagive about 7 yearsThis is combination with ben answer makes a smooth modal
-
Archimedes Trajano about 7 yearsthis does not work. change the fiddle to trigger the vertical scroll and the shift still appears.
-
DaveK over 6 years2017 and Bootstrap 4 the slight shift is STILL there with modals. This still fixes the issue, thanks!
-
Sayyed Abbas Rizvi over 6 yearsjust to fix an issue with a modal need to adjust styles of my body which could disturb many other things, but hell this worked for me +1
-
akcasoy almost 6 yearsYou may have accesibility problems with this approach (for the tools like Supernova), as the scrollbar still shows up and movable. The rule is "after the modal is closed, the user must be exactly there where the page was left". But i am not 100% sure...
-
gene b. almost 5 yearsTHIS is what worked for me -- not the other
overflow-y:auto
replies. -
Billy Ray Valentine almost 5 yearsWorked for me too. The other solutions did not.
-
Adam Thomason almost 5 years2019 here and very grateful for this fix!
-
ellaRT over 4 yearsusing bootstrap 4.2.1 this issue still there, and this answer fixed it. thank you!
-
Lacek about 4 yearsThis makes a page with scroll bar to have a second scroll bar when a modal is opened. And if you have a second modal on an opened modal, scroll bar of the first modal will be missing after you closed the second one.
-
DaEagle almost 4 yearsThis should be the accepted answer in 2020. Thanks!
-
ben.kaminski almost 4 years2020 and Bootstrap still hasn't addressed this == LOL!
-
janisch over 3 yearsWorked perfect for me, thank you :) By the way: You could also use
padding-right: 0;
instead ofpadding-right: 0px
for max efficiency