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

Apparently this issue was fixed in version 3.2.0 of Bootstrap. — devius, Dec 11 '15 at 11:48
Apparently not (2016). Future Readers should sort answers by Votes as the accepted answer is not the best answer. See [this answer](http://stackoverflow.com/questions/19960162/bootstrap-3-modal-fires-and-causes-page-to-shift-to-the-left-momentarily-brows#answer-25952508) and possibly also [this one](http://stackoverflow.com/questions/19960162/bootstrap-3-modal-fires-and-causes-page-to-shift-to-the-left-momentarily-brows#answer-19962780) — cssyphus, Feb 12 '16 at 03:28
Still not fixed 3.3.6, so thanks for the heads up @gibberish! — arjs, Jun 18 '16 at 17:12
Works [just fine](https://getbootstrap.com/javascript/#modals) in 2017. — lowtechsun, Mar 02 '17 at 21:58

cjd82187 · Answer 1 · 2013-11-13T19:42:22.380

93

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

edited Nov 13 '13 at 19:42

answered Nov 13 '13 at 19:35

cjd82187

3,468
3
15
19

11

You 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. – cjd82187 Nov 13 '13 at 20:25
1

the page now doesnot shift to the left, but now we have more vertical scroll bars!!!. – Laxman Jun 19 '14 at 10:47
1

Works, but adds a second scroll bar. – empz Jul 23 '14 at 16:59
Perfect. Quick and easy. Thanks – coggicc Jul 02 '15 at 00:07
5

**Also add padding** , `.modal-open { overflow: auto; padding-right: 0px !important; }` as @ben.kaminski said, which gets rid of shifting left issue completely. Hope helps. – Shaiju T Nov 01 '16 at 09:51
This is combination with ben answer makes a smooth modal – Sagive Mar 04 '17 at 11:18
You 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... – akcasoy Aug 08 '18 at 09:08

score 77 · Answer 2 · answered Sep 20 '14 at 19:27

77

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!

answered Sep 20 '14 at 19:27

ben.kaminski

986
3
13
24

I 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! – slopapa Sep 25 '14 at 00:04
Very simple fix and it worked while the top two answers didn't, was trying to fix this for too long.. – Chris Trudeau Nov 15 '15 at 00:48
6

This combined with the overflow:auto fix above does the trick for me. – DPac Jan 08 '16 at 17:22
Nice one, Ben. Thanks. – MSC May 30 '16 at 04:36
2

2016 and it works (when you also take overflow into account.) Thank you so much! – arjs Jun 18 '16 at 17:11
2019 here and very grateful for this fix! – Adam Thomason Jul 04 '19 at 13:52
1

This should be the accepted answer in 2020. Thanks! – Nick Van Brunt Jun 17 '20 at 17:46
2020 and Bootstrap still hasn't addressed this == LOL! – ben.kaminski Aug 01 '20 at 22:14

score 40 · Answer 3 · edited Aug 16 '16 at 12:15

40

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

edited Aug 16 '16 at 12:15

maracuja-juice

994
2
14
33

answered Feb 17 '15 at 16:39

Tony S

604
6
8

I think this is not an actual answer and you posted because you are not able to comment yet. But please be patient. – Cem Özer Feb 17 '15 at 16:45
Worked for me in 2016! Thanks – GhostRider Apr 27 '16 at 09:44
2017 and Bootstrap 4 the slight shift is STILL there with modals. This still fixes the issue, thanks! – DaveK Aug 28 '17 at 02:01
using bootstrap 4.2.1 this issue still there, and this answer fixed it. thank you! – ellaRT Oct 09 '19 at 16:45

score 22 · Accepted Answer · edited Sep 04 '16 at 13:06

22

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

edited Sep 04 '16 at 13:06

Alexander Schmidt

5,631
4
39
79

answered Dec 02 '14 at 07:49

user4314713

236
2
2

4

Worked for me but I had to change the margin-right to padding-right – GhostRider Mar 08 '15 at 13:08
@GhostRider: Thanks. I had to chance the margin to padding. – Brian Kates May 13 '15 at 18:16
Plus one for the fixed-top/fixed bottom fix, none of the other answers worked for this scenario. – tinmac Aug 25 '15 at 07:45
1

@FutureReaders [ben.kaminski's answer](http://stackoverflow.com/questions/19960162/bootstrap-3-modal-fires-and-causes-page-to-shift-to-the-left-momentarily-brows#answer-25952508), below,has a single-line css solution that should be the accepted answer. – cssyphus Feb 12 '16 at 03:22

Agni Pradharma · Answer 5 · 2014-03-08T13:48:49.243

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

Works 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, Apr 02 '15 at 14:24
Exactly 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. — Aelys, Jan 04 '16 at 06:56

score 8 · Answer 6 · answered Jul 22 '15 at 12:11

8

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

answered Jul 22 '15 at 12:11

Dizzle

1,026
13
26

score 7 · Answer 7 · answered Apr 24 '15 at 12:49

7

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

answered Apr 24 '15 at 12:49

abxstract

319
3
11

score 6 · Answer 8 · answered Jul 21 '16 at 15:10

6

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

html, body{
  padding: 0 !important;
}

answered Jul 21 '16 at 15:10

Femi-oke Anthony

61
1
2

Well, the snippet doesn't actually show anything. Add some colored blocks to show the effect of what you've given. – Al.G. Jul 21 '16 at 15:22
THIS is what worked for me -- not the other `overflow-y:auto` replies. – gene b. Jun 06 '19 at 14:41
Worked for me too. The other solutions did not. – Billy Ray Valentine Jun 08 '19 at 08:47

score 4 · Answer 9 · edited May 05 '15 at 04:16

4

$('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.

edited May 05 '15 at 04:16

ashatte

5,442
8
39
50

answered Mar 06 '14 at 08:59

hect0r90

101
4

1

Margin-right should not have a fixed pixel value as the scrollbar width varies from browser to browser. – lowtechsun Apr 02 '15 at 14:31
The scrollbar width changes based on the browser zoom too. Should use this script in conjunction with a scrollbar size detection script like [this](http://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes) – Kunal May 08 '15 at 22:39

score 4 · Answer 10 · answered Mar 26 '17 at 03:33

4

This solution work for me!!!!

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


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

answered Mar 26 '17 at 03:33

Jigar Bhatt

4,217
2
34
42

score 4 · Answer 11 · answered Mar 29 '19 at 08:28

4

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

answered Mar 29 '19 at 08:28

Corey B

85
8

This 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. – Lacek Mar 31 '20 at 08:41

score 4 · Answer 12 · answered Jun 29 '20 at 10:17

4

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

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

answered Jun 29 '20 at 10:17

Anurag Phadnis

817
7
13

Seldo97 · Answer 13 · 2020-07-22T20:47:03.323

4

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

edited Jul 22 '20 at 20:47

answered Jul 12 '20 at 16:15

Seldo97

611
1
8
17

Worked perfect for me, thank you :) By the way: You could also use `padding-right: 0;` instead of `padding-right: 0px` for max efficiency – janisch Oct 06 '20 at 07:29

score 3 · Answer 14 · answered Aug 25 '16 at 04:29

3

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

try this code really it's working

answered Aug 25 '16 at 04:29

beast.nil

31
1

Although this isn't the most beautifull way to fix it, it does work – Sander Van Keer Oct 13 '16 at 15:20
just 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 – Sayyed Abbas Rizvi Sep 13 '17 at 08:33

score 2 · Answer 15 · edited Mar 25 '15 at 07:06

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
}

edited Mar 25 '15 at 07:06

I'm Geeker

4,601
5
22
41

answered Mar 25 '15 at 06:35

KayJ

21
3

knighter · Answer 16 · 2014-11-21T04:33:40.660

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

this does not work. change the fiddle to trigger the vertical scroll and the shift still appears. — Archimedes Trajano, Apr 18 '17 at 06:11

score 1 · Answer 17 · answered Mar 11 '15 at 16:30

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

Sudhanshu sharma · Answer 18 · 2020-03-05T17:35:32.083

1

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

edited Mar 05 '20 at 17:35

answered Sep 05 '16 at 11:17

Sudhanshu sharma

1,917
3
20
29

score 1 · Answer 19 · answered Feb 21 '18 at 15:12

1

Implemented this simple solution

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}

answered Feb 21 '18 at 15:12

Lonare

3,581
1
41
45

score 1 · Answer 20 · answered Nov 06 '19 at 07:37

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.

score 0 · Answer 21 · answered Jun 01 '16 at 18:47

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

score 0 · Answer 22 · answered Oct 14 '16 at 15:58

0

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

answered Oct 14 '16 at 15:58

Goloveichuk

1

score 0 · Answer 23 · answered May 15 '17 at 21:37

0

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

answered May 15 '17 at 21:37

Theo Orphanos

1,417
1
19
27

score 0 · Answer 24 · answered Sep 08 '18 at 18:55

0

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

answered Sep 08 '18 at 18:55

Bartando

719
8
26

score 0 · Answer 25 · answered Jun 19 '21 at 11:35

0

For Bootstrap 5, this worked for me

body.modal-open {
  overflow-y: inherit;
}

answered Jun 19 '21 at 11:35

Aldrin Jenson

906
7
6

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

25 Answers25

Linked