Bootstrap: Open modal is shifting fixed navbar to the right

[mhawk0]

re: https://github.com/twbs/bootstrap/issues/9855
in 3.2.0, when body has a scrollbar, it's content now stays in place when modal is opened (padding is added to the body).
But fixed top navbar, having position: fixed, left: 0 and right: 0, now jumps to the right when modal is opened, as it ignores padding-right on the body.

[cvrebert]

What OS and browser are you using?
Could you please make a JS Bin demonstrating the problem?

[mdo]

Confirmed in latest Safari and Chrome on OS X.

[WeaselScience]

Confirmed in latest Chrome on Windows 7

[Vivi-wu]

I come across another problem, also in 3.2.0 and the body has a scrollbar,
different thing is my site header with class .navbar.navbar-default (so its position is relative not fixed)
Open a small modal will make the navbar show 15px blank space to the right border of browser.

Browser : Chromium Version 34.0.1847.116 Ubuntu 14.04
The content stays in place (no shifting), so if you don't look at the top right corner, you won't notice this problem.

You can observer the problem on the bootstrap page in the section Modal/Optional sizes
with the small modal example.
http://getbootstrap.com/javascript/#modals-sizes

[parminderkaur]

This fixes it in version 3.2.0 :+1:
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

[cvrebert]

@parminderkaur Except that hardcodes the width of the scrollbar

[nhouse]

I am having this issue as well, but the problem changes slightly depending on whether a scrollbar is active.

When there IS a scrollbar, opening a modal causes the fixed navbar to shift to the right.

When there is NOT a scrollbar, opening a modal causes the page body to shift to the left.

Demo video: http://screencast.com/t/2PV8Y1IN7

Demo page: http://www.pricewombat.com/p/105797/Crest-3D-White-Whitestrips-Professional-Effects-Teeth-Whitening-Kit-20-Treatments-Packaging-May-Vary-

I'm running Chrome 36.0.1985.125 on Windows 7. Also tested in IE 11 and same thing happens.

[ramon18]

My fix (in a custom js file, no need to patch current 3.3.4 BS sources)

    // TODO: Add any custom classes with 'position: fixed' to the selector below
    var fixedCls = '.navbar-fixed-top,.navbar-fixed-bottom';
    var oldSSB = $.fn.modal.Constructor.prototype.setScrollbar;
    $.fn.modal.Constructor.prototype.setScrollbar = function () {
        oldSSB.apply(this);
        if (this.bodyIsOverflowing && this.scrollbarWidth)
            $(fixedCls).css('padding-right', this.scrollbarWidth);
    }

    var oldRSB = $.fn.modal.Constructor.prototype.resetScrollbar;
    $.fn.modal.Constructor.prototype.resetScrollbar = function () {
        oldRSB.apply(this);
        $(fixedCls).css('padding-right', '');
    }

Dont forget to apply the same for the .navbar-fixed-bottom element any position: fixed

[john-999]

Confirmed with:

Bootstrap 3.2.0
Firefox 32.0 (Linux)

(I can also confirm @nhouse's description.)

[cvrebert]

Thanks folks, we have sufficient confirmations; no need for further ones.

[sanjay900]

I have a slightly different fix, the previous one didn't work:

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $('.navbar-fixed-top').css('margin-right', scrollbarWidth);    
    }
})
.on('hide.bs.modal', function () {
    $('.navbar-fixed-top').css('margin-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);
};

[hzulla]

No fix, just a bit of debugging, using Firefox 32.0.3 and Chromium 37.0.2062.120 on Ubuntu here.

After testing, I found that the vertical scrollbar for both browsers is 15px wide, but Modal.prototype.setScrollbar sets a value of 30px for padding-right instead. 15px would be correct.

The reason is that bodyPad = this.$body.css('padding-right') is 15px, which is then added to the 15px value of this.scrollbarWidth.

(I'm fairly new to this, so) I have no idea where that 15px value for padding-right comes from in this.$body.css. Firebug doesn't show me any such css setting for padding-right in the body tag.

[tobyee]

@ramon18 Thanks, the patch work for me.

[martinsifra]

Having still this problem with Chrome 38.0.2125.122. After open a modal, the a fixed navbar is shifted to the right.

[cvrebert]

No further confirmations are necessary.

The Bootstrap Team is fully aware that this is a legit bug.

[MrBukowski]

Thanks @parminderkaur , it works ;-)

[restran]

@parminderkaur

This fixes for me in version 3.2.0

.modal-open[style="padding-right: 17px;"] .navbar-fixed-top,
.modal-open[style="padding-right: 17px;"] .navbar-fixed-bottom {
padding-right: 17px;
}

[M1chae1]

@parminderkaur Thanks! The fix works on 3.3.2 too!

[Hint-ru]

@ramon18 Thx. But we should check this.bodyIsOverflowing too.
if (this.bodyIsOverflowing && this.scrollbarWidth) $('.navbar-fixed-top').css('padding-right', this.scrollbarWidth);

[JiNexus]

I'm still experiencing this kind of bug in Bootstrap v3.3.4 I hope they will fix this issue. I tried putting padding-right: 17px on the fixed navbar to temporarily fix it but I found out that it only works on Chrome and Firefox using windows OS but when I switch to Ubuntu OS the value of padding-right in the body when modal is opened is changed to 15px, so that means that I have to change the value that I set in fixed navbar from 17px to 15px just to fix it on Chrome and Firefox in Ubuntu platform.

[scooterlord]

Hello.

After putting up with this for a couple of years and using hacks, shivs and useless javascripts, here I come with a pure css solution to the problem. Simple as hell. Cross-browser.

We create a class (eg no-jump), and apply it to all direct descendands of body and fixed elements.

Then simply:

.modal-open .no-jump {
overflow-y:scroll;
}

Since the body overflow is hidden and usually fixed elements are either at top or bottom and noone would scroll there, noone will ever notice it in any browser.

It's cross-browser, which means it doesn't need to detect scrollbar width which is different among different browsers/OS'es, OR detect touchscreens that have no scrollbars at all. Overflow-y will create the appropriate width of scrollbar according to each occasion.

I am surprised no-one came up with this solution so far (including myself).

[ramon18]

@Hint-ru Ya the user may resize the window between modals, that's a nice fix, thanks :+1:

(I updated the code in my above post for copy/paste gurus)

[JiNexus]

Thanks @ramon18 and @Hint-ru you did great fixing with this kind of issue.

[nozpheratu]

@Hint-ru @JiNexus @ramon18 Unfortunately that won't work on different browsers / operating systems as scrollbars won't always have a pixel width of 17px. For instance, it's only 15 on Ubuntu Firefox.

[JiNexus]

Actually I tried it on Windows and Ubuntu, both Firefox and Chrome. They work to me perfectly fine. I don't know with Mac or any other browser such as Opera.

[nozpheratu]

@JiNexus Just saying, if I was your user and I went to your website right now using those snippets your website would still have the problem for me. It might work on some browsers/OSs, but it's no silver bullet.

[JiNexus]

@nozpheratu if you saw my previous post I already told that kind of problem that in different OS's the pixel is not always 17px. By the way have you seen the code that we are using? If you notice we are not defining a value to the padding-right, we let Javascript define the value by using "scrollbarWidth" so that it will be flexible to other OS's or browsers. Please review the code before jumping out to conclusions.

[nozpheratu]

@JiNexus I actually cc'd the wrong person, I meant to direct that original post to @restran.

[JiNexus]

@nozpheratu Seriously? you accidentally cc'd 3 wrong person from your original post? Anyway it doesn't matter, this case is close I hope bootstrap will add this fix to their next update.

[nhouse]

This issue is a continuation of https://github.com/twbs/bootstrap/issues/9855 which was opened about a year and a half ago. Considering the number of websites using Bootstrap and affected by this probem, I'm astounded it hasn't been fixed yet.

[JiNexus]

I don't recommend those css hacks that puts overflow: y-scroll, lets say for example your modal has a heap of content on it that means you wont be able to scroll down your modal anymore.
For me the right fixed is this, you allow Javascript to determine its scrollbarWidth and put it as your padding-right and as the modal closes you also reset the padding-right by removing the css: (Credit to @ramon18 )

/* File: fixed.js
 * Fix shifting fixed navbar to the right 
 */

    $(document).ready(function(){
        $(window).load(function(){
            var oldSSB = $.fn.modal.Constructor.prototype.setScrollbar;
            $.fn.modal.Constructor.prototype.setScrollbar = function () 
            {
                oldSSB.apply(this);
                if(this.bodyIsOverflowing && this.scrollbarWidth) 
                {
                    $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', this.scrollbarWidth);
                }       
            }

            var oldRSB = $.fn.modal.Constructor.prototype.resetScrollbar;
            $.fn.modal.Constructor.prototype.resetScrollbar = function () 
            {
                oldRSB.apply(this);
                $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', '');
            }
        });
    });

[empz]

@scooterlord Can you provide a full example? I've added your CSS class and applied it to my nav element which is the only fixed element but it's still shifting when the modal is opened...

[nhouse]

@JiNexus's code worked great for me.

[sarahmurray]

A similar issue occurs when immediately opening a modal from another modal (using "show" and "hide" methods) – the padding and .modal-open class are removed from the body but not re-added, until the second modal is dismissed, when the padding is then added to the body. And if you go through the loop a few times it keeps adding more and more padding to the body.

Or is opening a modal from another modal not supported?

[ramon18]

Overlapping Modals is not supported
See http://getbootstrap.com/javascript/#modals

[JiNexus]

@sarahmurray I suggest you try to use the event handling in bootstrap http://getbootstrap.com/javascript/#modals-events, like for example
hidden.bs.modal - This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

In my sample code below, My #dangerModal won't show until the #loadingModal is hidden. Please always use $(document).ready(function(){ .. }); and $(window).load(function(){ .. }); this is to ensure that all js are loaded.

$(document).ready(function(){
    $(window).load(function(){
        $(function(){
            $('#loadingModal').on('hidden.bs.modal', function (e) {
                $('#dangerModal').modal({show: true,
                                         keyboard: false,
                                         backdrop: 'static'});
            });
        });
    });
});

[eLement87]

I had the same issues and no solutions above worked for me.

But this piece of code worked for me to fix the 15px bar on the right side :

body {
    padding-right: 0 !important;
}

But the Main-Nav is still jiggeling, when the Modal is comming up.
And then...

#main-nav {
    padding-right: 0 !important;
}

And it's gone :)

Bootstrap 3.3.4

[unholyknight]

@eLement87 Those definitions look like they work without any unintended consequences as far as I've noticed. Thanks!

[blackfyre]

:+1: For @eLement87's solution, and @unholyknight's observations

[silvenon]

@JiNexus' solution is adding padding to avoid shifting to the right, it works well. I don't see how the solution above could possibly work as it brings everything, including Bootstrap's own patches, back to square zero, negating that the issue even exists. Am I missing something? Are you sure you were testing in environments where scrollbars take up actual space?

[ryoga7482]

body.modal-open {
overflow-y: scroll;
padding-right: 0 !important;
}

Worked in my situation - combination of this and #9855

@schack86 :

.modal {
margin-left: 17px;
}

Shifts modal if centering is offset.

[fxrising]

Thanks ryoga7482, that was the only css solution that worked for me :)

[nairys]

@ryoga7482 worked for me. thanks!

[JosKrause]

Also would like to add that @ryoga7482 solution worked absolutely flawless so far in all of my pages dealing with modals, also when the content is a centered container; applied to BS 3.3.0.

[schack86]

Hi guys. I'm new on this forum, but I'm experiencing the same problem with bootstrap 3.3.5. Implementing this solution:
body.modal-open {
overflow-y: scroll;
padding-right: 0 !important;
}
fixes the issue of added padding to body perfectly. But my modal isn't horizontally centered anymore. It's moved to the left by amount of the width of the scrollbar (in my case: padding-right: 17px;)
Do any of you brainiacs know how to fix it?

[JiNexus]

@schack86 try our code above. I assure it work perfectly fine in different browser and OS.

[schack86]

@JiNexus I've tried your code in win7 chrome and firefox, and so far it works like a charm. I have yet to try it on ios.

[JiNexus]

@schack86, I've been there in your situation. We are glad that it fixes your problem. I don't want to argue with the other fixes above since only those who does a split testing with different browser with different OS's will truly understand which one is the right fix for them.

[schack86]

@JiNexus Am I missing something. The fixed top nav still works perfectly. But if the modal is shorter than the viewport and scrollbar isn't needed, then the padding on different elements still occur. Do I have to include these elements somehow in the script? Please help.

I simply don't understand why this issue haven't been solved by the bootstrap team yet. So frustrating!

[JiNexus]

@schack86, Hey, I reviewed my code and my modal, I also tried to lessen the contents of my modal to make it shorter in the screen and see if I will experience the same issue that you are talking about but so far it is working fine on my end. Can you try to clean the css fixed that you have made before you use our code to fix the problem with modal? It might be the culprit. For clarification I'm currently using Bootstrap v3.3.4. Cheers!

[schack86]

@JiNexus Back to basics. I've tried making a simple jsfiddle snippet with bootstrap 3.3.5 and jquery 2.1.3 and implementing your code. The only css besides bootstrap is colouring the divs. Both modals isn't centered 100% and the navbar shifts place on open and close of modal.

https://jsfiddle.net/d4bg8uzj/2/embedded/result/

Could you please tell me what I am doing wrong?

[twbs-lmvtfy]

Hi @schack86!

You appear to have posted a live example (https://fiddle.jshell.net/d4bg8uzj/2/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 141, column 9 thru line 141, column 50: Duplicate ID myModalLabel.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[schack86]

@JiNexus I tried stripping the code down to the bare minimum and I noticed now that the problem occurs at the breakpoint around 992px. 1920 and down to 993 works perfectly, but when it hits 992 the padding is added to the body with a short modal. The long scrollbar of the long modal hides the problem. Can you confirm this bug?

You can check it out here:
http://modal.martinschack.dk/
The only added css (besides bootstrap.min.css) is just colouring the individual divs.
I am currently using bootstrap 3.3.5 and jQuery 2.1.3 (so it should be up to date).

I hope you understand my problem :)

[schack86]

@JiNexus I simply don't understand it. The only thing that I, myself, is adding to the css is the background color. The "no-repeat scroll 0 0;"-part must be added by bootstrap or some other part. When I use chrome devtools I don't see the code you're talking about. But nevertheless, I don't know how to fix it. This is driving me nuts! Could you please take a screenshot and paste it here?

[JiNexus]

@schack86 I think the problem is the way you handle your layout. Remember that bootstrap is adding padding-right to the body every time the modal is opened, so I advise you to put your background-color in the body tag. This is just a sample layout that I extracted in my template, feel free to try it out. You can also look for more examples here http://getbootstrap.com/getting-started/#examples and see how they properly layout their templates. Cheers!

<body style="background-color: green;">
    <header>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" aria-expanded="false" data-target="#bs-example-navbar-collapse-6" data-toggle="collapse" type="button">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>
                <div id="bs-example-navbar-collapse-6" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <div class="container">
        <div class="row">
            Your contents here!!!!!!!!!!!!!!!!! (START)
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                        ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            Your contents here!!!!!!!!!!!!!!!!! (END)
        </div>
    </div>

    <footer>
        <div class="footer" style="background-color: blue;">
            <div class="container">
                <p class="text-muted">Place sticky footer content <a href="http://getbootstrap.com/examples/sticky-footer/">here</a>. </p>
            </div>
        </div>
    </footer>
</body>

[adrianparr]

This worked for me ...

body.modal-open {
    overflow-y: auto !important;
    padding-right: 0 !important;
}

[schack86]

@JiNexus ... I've tried the code you've send, including your fixed.js. It works perfectly if the modal is light on content. BUT when the modal is filled with a lot of content and its height is greater than the viewport, the padding-left is added, and the modal is off again... Haven't included anything but your code and the bootstrap base. It's especially noticeable at breakpoint 768px. Please confirm that you experience this as well.

check it out here:
http://test.martinschack.dk/

[Praveen2910]

Simply make the required changes in the bootstrap.css file to fix the issue of the modal shifting the entire site to left or adding a padding to the site.

[ghost]

@ryoga7482 Solution works for me too.

[safderjaffri]

Hi everyone, here's my solution its working for me

1. open > bootstrap.min.css OR bootstrap.css
2. find class
   .modal-scrollbar-measure{
   position:absolute;
   top:-9999px;
   width:50px;
   height:50px;
   /_overflow:scroll this is bootstrap default value change it with_/ overflow:hidden;
   }
3. find another class.
   .modal-open {
   /_overflow:hidden this is bootstrap default value change it with_/ overflow:visible;
   }
   for mobile device:
   .modal-open {
   overflow:hidden;
   }

thanks

[paullewisn]

I 'fixed' mine with a combination of the above:

body.modal-open{
    width:100%!important;
    padding-right:0!important;
    overflow-y:scroll!important;
    position:fixed!important;
}

[vijayviji]

The given solution doesn't seem to work on 'edge' browser

[sebwebdesigner]

@sanjay900 Nice solution, and the only one that worked for me.
The navbar still shifted when closing the modal so I changed hide.bs.modal to hidden.bs.modal and it did the trick.

[redeventmedia]

@tallpaullewis yup that worked for me too! Thanks.

[tehXor]

Beware of the @ryoga7482 "solution" and others that hard code CSS properties. In the case of the solution with a fixed overflow-y: scroll; on body you will get the effect that when your modal has enough content that it also overflows the screen there will be two scrollbars. And this is usability wise very poor. If you call that a solution well than so be it. But I guess for most people it is not and they actually may not know that they run into this kind of problem when they test with small modals on big screens. On mobile devices most your modals will overflow even if they don't have much content...

[JiNexus]

@tehXor I agree, guys please consider the solution that I made, just scroll up. I've implemented it to my app and so far it fixes my issue dynamically.

[Eagle3386]

@JiNexus what about @eLement87's suggestion in his https://github.com/twbs/bootstrap/issues/14040#issuecomment-96361083? Isn't that valid, too?

[JiNexus]

@Eagle3386 His solution is not dynamic you will probably understand when you encounter same problem with https://github.com/twbs/bootstrap/issues/14040#issuecomment-124684418. I don't recommend a css hack on the modal issue since it's basically a javascript driven. A static css hack might work on a certain browser but not to all. If you follow the thread and reread the comments you will understand how we arrive with that solution. Only those who does a split testing with different browser with different OS's will truly understand which one is the right fix for them.

[Eagle3386]

@JiNexus I do get your point and it's an absolutely valid one. I'll stick with the jQuery one then, too.
Thanks for the clarification and help, though! :)

Hopefully, this gets added to Bootstrap soon.

[stosh15x]

This worked for me:

$('#myModal').bind('hidden.bs.modal', function () {
    $("body").css("padding-right", "0px");
    $('#myModal').modal('handleUpdate');
});

$('#myModal').bind('show.bs.modal', function () {
    $("body").css("padding-right", "-15px");
    $('#myModal').modal('handleUpdate');
});

[saibalroy]

my bootstrap modal form jump on safari ipad.how to fix it?

[jomifepe]

This worked for me:

Removed this in boostrap.min.js:
&&this.$body.css("padding-right",a+this.scrollbarWidth)

And added this to my CSS:
body.modal-open { padding-right: 0px !important; } html { overflow-y: auto !important; }

[saibalroy]

where i add this css?

[jomifepe]

Your custom css.

[saibalroy]

it's not working.

[saibalroy]

my form still jumping.

[Eagle3386]

Are you guys willing to scroll just 5 posts above? @JiNexus was kind enough to repeat the working (!) solution there.

@JiNexus thx for the detailed explanation. I'll go with your solution. ;) :+1:

[kapilindore]

/_This worked for me ---Bootstrap v3.3.6---
---after bootstrap.css---_/
body.modal-open {
overflow-y: auto !important;
padding-right: 0 !important;
}

.modal-scrollbar-measure {

overflow: hidden;
}

[vikarz]

have the same problem on bootstrap 3.3.6, layout shrink to left after showing second modal, please help. i'm developing web for school. Thanks.

[xuefengwang]

@JiNexus Thank you for the solution. Using already calculated scroll bar width looks a good fix.

[JiNexus]

@xuefengwang No problem, this fixed is also credited to @ramon18 & @Hint-ru
Cheers!

[vickyraj1521]

This works fine

body.modal-open{
width:100%!important;
padding-right:0!important;
overflow-y:scroll!important;
position:fixed!important;
}

[mizurnix]

@vickyraj1521 It does, unless you have a long modal. If modal content needs scrolling, then you have two scrollbars and it's ugly

[vickyraj1521]

You may try after setting a min height for the page content. I hope it will solve the problem. You may hide the scroll bar when your modal content is too long. Well its just a trick to make it look good.

[ghost]

Hey @JiNexus, i'm getting this error in Chrome console when i'm using your solution:
Uncaught TypeError: Cannot read property 'Constructor' of undefined

And the code is exactly the same you provide. This is how appears in the Chrome inspector:

I'm using BS 3.3.6 in Google Chrome w/ OSX Yosemite.

[JiNexus]

@erickacevedor Sorry, I've been in the back end for a couple of months now and never touch some front end works for awhile so I don't know what's the latest updates of Bootstrap now. But I guess the issue is you load it before bootstrap, therefore it assumes bootstrap is already loaded. Append it in the right order: jQuery -> Bootstrap -> Your Fix

I hope my assumptions helps you. :D

[ghost]

Hey @JiNexus, indeed helped, now is fixed. Thank you a lot! 🎉

[davITnemec]

@mizurnix I have the same issue, did you figure out how to hide a second scroll bar? Thank you

[mizurnix]

@dejwne I went with the other solution provided above by @JiNexus. It seems to cover most cases (to this point, all cases I could come up with) and work well cross-browser.

[davITnemec]

Could you help me @mizurnix od @JiNexus please? I'm using exactly same code from @JiNexus added to my file fixedModal.js and loading it after jQuery and Boostrap, but nothing changed. The page is still moving to the right after modal is shown.

Boostrap v4.0.0-alpha.2
Chrome 51.0.2704.106

[danieldafoe]

Is this still an issue for anyone? I've tested in Safari 10 and Chrome 52 on macOS and can't reproduce when opening a modal when there's a navbar with .navbar-fixed-top on the page.

[inge1980]

Thanks @JiNexus! Beautifully done :+1:

$(document).ready(function(){
    $(window).load(function(){
        var oldSSB = $.fn.modal.Constructor.prototype.setScrollbar;
        $.fn.modal.Constructor.prototype.setScrollbar = function () {
            oldSSB.apply(this);
            if(this.bodyIsOverflowing && this.scrollbarWidth) {
                $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', this.scrollbarWidth);
            }       
        }
        var oldRSB = $.fn.modal.Constructor.prototype.resetScrollbar;
        $.fn.modal.Constructor.prototype.resetScrollbar = function () {
            oldRSB.apply(this);
            $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', '');
        }
    });
});

[broakenmedia]

Still an issue for me yes!

[rmcsharry]

I still see this problem using Bootstrap v3.3.7

MacOSx El Capitan in
Chrome 52.0.2743.116
Firefox 48.01
Safara 9.1.1

[in html or in body selector] {
overflow-y: scroll;
}

That will trigger it with standard bootstrap setup when the modal opens.

MacOS has scrollbars set to 'always on' in system prefs.

I tried the js fix from @JiNexus and sadly did not work on this platform. But he is correct that the various CSS hacks will only work in certain platform/browser/application combinations.

[psmoq]

I have faced to this problem too and I found a css workaround:

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

Tested on Windows 7: Chrome 52/ Mozilla 48/ IE9 and works fine.

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team

[Goloveichuk]

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

[Eagle3386]

The _only_ solution that works cross-plattform is the one provided by JiNexus above. So, deal with it instead of repeating the same padding-hacks as others did before you. All subscribed users will thank you in advance!

[enekogb]

The fix provided by @ramon18 here and @JiNexus here works like a charm but ....

If you have a close-one-modal-and-open-another-modal action, be sure to wait until the first modal closes before opening the second one, or it won't work.

// BAD
modal1.modal('hide');
modal2.modal('show');

// BETTER
modal1.one('hidden.bs.modal', function() {
  modal2.modal('show');
}).modal('hide');

[bke-daniel]

Sadly, I'm still experiencing this issue in BS4, Alpha 6 on:

• Chrome 57.0.2987.133
• Opera 43.0.2442.1144
• Firefox 51.0.1
• Safari 10.1 (12603.1.30.0.34)
  OS X 10.12.4 64-bit

[Eagle3386]

@bke-daniel this issue is for the "old" BS3 branch, hence your comment is a) in the wrong place, b) doesn't add useful information to the issue (the working fix is explained and linked above within the posts of @enekogb and myself) and c) almost only spam regarding the huge amount of subscribers being notified for no good reason.

@oddlyfunctional There's a +1 feature provided by GitHub, so spare us subscribers with such posts. Especially since my post 4 posts before explained everything neccessary.

[ghost]

After many hours of reading and testing, this worked for me:

var scr_size = window.innerWidth;
var scr_avail = $('body').innerWidth();
var pad_right = scr_size - scr_avail;

$('.modal')
.on('show.bs.modal', function () {
$('.YourFixedNavBarClass').css('padding-right', pad_right);
})
.on('hidden.bs.modal', function () {
$('.YourFixedNavBarClass').css('padding-right', '');
});

I hope this helps someone else.

Cheers.

[Eagle3386]

@emmzone, no, this will not fix the bug cross-platform - as was already stated several times before.
I find your lack of respect to the followers of this issue disgusting. Please remove your comment so others won't be confused or even mislead as it's simply false.

The one and only solution to this bug still remains to be the code posted above by @JiNexus - deal with it!

To @mhawk0, @cvrebert or anybody other person with appropriate permissions: can you lock this issue so that further inoperable, non-cross-platform and useless comments won't get added to it?
By doing so, please either delete this comment afterwards, too or drop me a line so that I remove it myself.

To every other notified person: sorry for the noise, just trying to stop this mess.