Bootstrap 3 modal creates scrollbar when opened

Question

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,

Answer 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

---

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

Answer 2

In my case there were my own styles that caused the problem:

html {
    overflow-y: scroll;
}

You may change html to body so there is only one scrollbar:

body {
    overflow-y: scroll;
}

Answer 3

This is my solution:

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

and add this also

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

Hope this help you.

Answer 4

this did a trick for me

$('html').bind('hidden.bs.modal', function () {
   console.log('hidden');
   $("html").css("margin-right", "0px");
});

$('html').bind('hide.bs.modal', function () {
   console.log('hiding');
   $("html").css("margin-right", "-15px");
});

$('html').bind('show.bs.modal', function () {
   console.log('shown');
   $("html").css("margin-right", "-15px");
});

Answer 5

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

Answer 6

It is so simple, just add to your css:

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

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