Bootstrap modal has a flaw

Question

As I was learning bootstrap and trying out the example on the official page, I found a flaw (maybe) with the modal component.

Click the "Launch demo modal", you will notice there is a notable margin on the top right corner, and the navbar will stretch/shrink when the modal dialog disappear/appear.

Is that a bug or intentional? I think it's annoying, How to disable it?

I don't see what you're talking about when I try it. The nav bar doesn't do anything at all when the modal appears. — Pointy, Aug 31 '13 at 15:39
it is probably due to the main window vertical scrollbar appearing/disappering when the modal shows up, however i cannot reproduce it on my chrome version (i see the scrollbar sorta flash thoug) — guido, Aug 31 '13 at 15:40
It may be helpful to indicate what browser your using. If its IE I would probably delete the question and uninstall. — Kevin Bowersox, Aug 31 '13 at 15:40
Oh, yes perhaps you're seeing the scroll bar appear/disappear. The only way to do anything about it is to make sure your dialogs don't exceed the window size. — Pointy, Aug 31 '13 at 15:43
See this issue: https://github.com/twbs/bootstrap/issues/9855 — mbaird, Aug 31 '13 at 15:45
@mbaird Yeah, same as that issue. I'll wait for them to fix it. — adamsmith, Aug 31 '13 at 15:50

score 7 · Accepted Answer · answered Sep 07 '13 at 05:25

7

To fix this manually simply add

body.modal-open, 
.modal-open .navbar-fixed-top, 
.modal-open .navbar-fixed-bottom 
{
    margin-right: 0px;
}

to a stylesheet that is applied after the bootstrap stylesheets.

If you want to hide the scrollbar as well you can add

.modal
{
    overflow-y: auto;
}

as well.

answered Sep 07 '13 at 05:25

lilasquared

138
1
6

To further prevent the body of the page from moving around apply: body.modal-open { overflow-y: visible; } – CTS_AE Dec 31 '13 at 18:34
1

@lilasquared - now this fix don't work =( have any idea? – Max P Jan 05 '14 at 10:30
This works better when there is a scrollbar on the page: http://stackoverflow.com/questions/19960162/bootstrap-3-modal-fires-and-causes-page-to-shift-to-the-left-momentarily-brows – John Watson Nov 14 '14 at 20:48

score 5 · Answer 2 · answered Jan 08 '15 at 16:38

5

this is the best solution i found:

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right: 0px !important;
    overflow-y: auto;
}

answered Jan 08 '15 at 16:38

Rachid O

13,013
15
66
92

score 3 · Answer 3 · answered Mar 08 '14 at 09:58

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

And this is my temporary quick fix and it's 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

score 2 · Answer 4 · answered Apr 18 '14 at 10:44

2

Be sure to test for both when the original page already has a scrollbar and does not already have a scrollbar.

This worked for me with v3.1.1.

html, .modal, .modal.in, .modal-backdrop.in {
    overflow-y: auto;
}

answered Apr 18 '14 at 10:44

Jay Mathis

1,145
2
7
9

score 1 · Answer 5 · answered Jan 08 '14 at 13:59

1

in addition to this also make sure you have the following

html { overflow-y:auto; }

in your stylesheet to stop it shifting left

answered Jan 08 '14 at 13:59

Helen Marie

21
5

score 1 · Answer 6 · answered Apr 04 '14 at 11:36

I had this issue as well (bootstrap 3.1.1). I was opening a modal and there was a missing space on the backdrop (where a scroll bar will appear if the modal is greater than page height) and the content of the page was resizing and shifting to the left.

My layout uses a fixed navbar.

I added a couple of CSS selectors that seems to prevent the page resizing and ensuring that the modal-backdrop fills the screen

html {
    /* This prevents the page from shifting when a modal is opened e.g. search */
    overflow-y: auto;   
}
.modal,.modal.in,.modal-backdrop.in {
    /* These are to prevent the blank space for the scroll bar being displayed unless the modal is > page height */
    overflow-y: auto;
}

I still find it a bit odd where you can have two scroll bars if the page and the modal content is more than the screen height but I can live with that.

score 0 · Answer 7 · answered May 21 '14 at 10:21

0

body, .navbar-fixed-top, .navbar-fixed-bottom {
  margin-right: 0 !important;
}

this worked for me

answered May 21 '14 at 10:21

ClaraG

322
2
14

score 0 · Answer 8 · edited Aug 25 '14 at 22:55

0

margin-right did not work in my case, I found padding-right to solve the issue.

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

edited Aug 25 '14 at 22:55

hlscalon

7,304
4
33
40

answered Aug 25 '14 at 22:51

Dre

1

score 0 · Answer 9 · edited May 23 '17 at 12:30

I tried Agni Pradharma's fix, but had to slightly tweak it to make it work.

I got it working using this:

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

Bootstrap modal has a flaw

9 Answers9