Bootstrap 3 modal creates scrollbar when opened

Bootstrap 3 modal creates scrollbar when opened

I’m trying to use Bootstrap for the first time and am having an issue with modal dialogs. Using the example code on this page, when the modal is opened a scrollbar appears, which also shifts the content on the page to the left.
Code:

JSFIDDLE: http://jsfiddle.net/WqRBP/
A lot of sites I’m looking at use Bootstrap and they don’t have this issue, so is there some sort of easy fix for the problem?
EDIT: The scrollbar appears in Chrome and IE, I haven’t tested in other browsers.
Here’s what I’m seeing in JSFIDDLE:

Solutions/Answers:

Solution 1:

The problem occurred because Twitter Bootstrap always shift the page 15px to the left when a modal is opened. You can solve this by moving the page back to the right – margin-right: -15px. This can be done by using events show.bs.modal and hidden.bs.modal provided by Bootstrap's modal.

$('#myModal').bind('hidden.bs.modal', function () {
  $("html").css("margin-right", "0px");
});
$('#myModal').bind('show.bs.modal', function () {
  $("html").css("margin-right", "-15px");
});

jsFiddle

Related:  Disable time in bootstrap date time picker

FYI:

show.bs.modal: This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Reference

Solution 2:

LVarayut’s answer sent me in the right direction and what I ended up using is this:

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

.modal {
    overflow-y: auto;
}

Solution 3:

It is so simple, just add to your css:

body.modal-open{overflow:hidden!important;}

/*Optional:*/
.modal-open, .modal{padding-right:0!important}

Solution 4:

This is my solution:

.modal {
 margin-right: -15px;
}`

and add this also

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

Hope this help you.

Solution 5:

This is my solution

#myModal{
    overflow:hidden;
}
body {
    overflow-y: scroll !important;
} 

With this,you will force your page to have a scroll bar.

Solution 6:

This issue is solved in Bootstrap version 3.2.0, which was released on 23/06/2014.

Thanks to @roadsunknown for the link (in the question comments).

Related:  twitter bootstrap 3 tab view fade does not work properly

References