Twitter Bootstrap modal pushes html content to the left

Question

If I open a modal dialog, through Twitter Bootstrap, I've noticed that it pushes all the html content of the page (i.e., in the container) to the left a little bit, and then puts it back to normal after closing itself. However, this only happens if the browser width is large enough to not be on the "mobile" (i.e., smallest) media query. This occurs with the latest versions of FF and Chrome (haven't tested other browsers).

You can see the problem here: http://jsfiddle.net/jxX6A/2/

Note: You have to increase the width of the "Result" window so it switches to the "med" or "large" media query css.

I have setup the HTML of the page based upon the examples shown on Bootstrap's site:

<div class='container'>
    <div class='page-header'>
        <h4>My Heading</h4>
    </div>
    <div id='content'>
        This is some content.
    </div>
    <div class='footer'>
        <p>&copy; 2013, me</p>
    </div>
</div>

I'm guessing this is not supposed to happen, but I'm not sure what I've done wrong.

EDIT: This is a known bug, for more (and up-to-date) information, please see: https://github.com/twbs/bootstrap/issues/9855

Answer 1

For bootstrap 3.x.x.

I have found a solution, that works with 100% CSS and no JavaScript.

The trick is, show the scrollbar for modal over the scrollbar of html content.

CSS:

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

here is an online example: http://jsbin.com/oHiPIJi/43/

I test it on Windows 7 with:

• FireFox 27.0
• Chrome 32.0.1700.107 m
• IE 11 in Browser Mode 8, 9, 10, Edge (Desktop)
• IE 11 in Browser Mode 8, 9, 10, Edge (windows phone)

One new little issues I could find with IE:

IE has background (=body) scrolling with mouse wheel, if nothing more to scroll in the foreground.

Care about position:fixed!

Because of the nature of this workaround, you need extra care for fixed elements. For example the padding for "navbar fixed" need to be set to html and not to body (how it is described in bootstrap doc).

/* only for fixed navbar: 
* extra padding stetting not on "body" (like it is described in doc), 
* but on "html" element
* the used value depends on the height of your navbar
*/
html {
  padding-top: 50px;
  padding-bottom: 50px;
}

alternative with wrapper

If you do not like set overflow:hidden on html (some people don´t want this, but it works, is valid and 100% standard compliant), you can wrap the content of body in an extra div.

Than you do not need extra care for fixed elements, you can use it like before.

body, html {
  height: 100%;
}
.bodywrapper {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

/* extra stetting for fixed navbar, see bs3 doc
*/
body {
  padding-top: 50px;
  padding-bottom: 50px;
}

here is an example: http://jsbin.com/oHiPIJi/47/

Update:

Issues in Bootstrap:

• #12627
• #9855

Update 2: FYI

In Bootstrap 3.2.0 they add a workaround to modal.js that try to handle the issues with Javascript for every invoke of modal.prototype.show(), Modal.prototype.hide() and Modal.prototype.resize(). They add 7 (!) new methods for that. Now ca. 20% of code from modal.js only try to handle that issues.