Bootstrap Modals keep adding padding-right to body after closed

Question

I am using bootstrap and Parse framework to build a small webapp. But those Bootstrap modals keep adding padding-right to body after closed. How to solve this?

I tri

Answer 1

Just remove the data-target from the button and load the modal using jQuery.

<button id='myBtn' data-toggle='modal'>open modal</button>

jQuery:

$("#myBtn").modal('show');

Answer 2

Just open bootstrap.min.css

Find this line (default)

.modal-open{overflow:hidden;}

and change it as

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

It will work for every modal of the site. You can do overflow:auto; if you want to keep scrollbar as it is while opening modal dialog.

Answer 3

A pure css solution that keeps the bootstrap functionality as it should be.

body:not(.modal-open){
  padding-right: 0px !important;
}

The problem is caused by a function in the bootstrap jQuery that adds a bit of padding-right when a modal window opens, if there is a scroll bar on the page. That stops your body content shifting around when the modal opens, and it's a nice feature. But it's causing this bug.

A lot of the other solutions given here break that feature, and make your content shift slightly about when the modal opens. This solution will preserve the feature of the bootstrap modal not shifting content around, but fix the bug.

Answer 4

easy fix

add this class

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

Its a override but works

Answer 5

This is a bootstrap bug and fixed in v4-dev: https://github.com/twbs/bootstrap/pull/18441 till then adding below CSS class should help.

.fixed-padding {
  padding-right: 0px !important;
}

Answer 6

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

Worked for me. Note that the Scrollbar is forced in body - but if you have a "scrolling" page anyways, it doesn't matter (?)