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

I know this is an old question, but none of the answers from here removed the problem in my similar situations and I thought it would be useful for some developers to read my solution too.

I use to add some CSS to the body when a modal is opened, in the websites where it is still used bootstrap 3.

body.modal-open{
            padding-right: 0!important;
            overflow-y:scroll;
            position: fixed;
        }

Answer 2

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

Answer 3

I now this is old, and all the solutions offered here may work. I'm just adding something new in case that could help someone: I had the same issue and noticed that opening the modal was adding a margin-right to my sidenav (probably a kind of inheritance from the padding added to the body). Adding {margin-right:0 !important;} to my sidenav did the trick.

Answer 4

I had that same problem using modals and ajax. It was because the JS file was referenced twice, both in the first page and in the page called by ajax, so when modal was closed, it called the JS event twice that, by default, adds a padding-right of 17px.

Answer 5

I'm loading the default bootstrap 3.3.0 CSS and had a similar problem. Solved by adding this CSS:

body.modal-open { overflow:inherit; padding-right:inherit !important; }

The !important is because bootstrap modal javascript adds 15px of padding to the right programatically. My guess is that it's to compensate for the scrollbar, but I do not want that.

Answer 6

If you're more concerned about the padding-right related thing then you can do this

jQuery:

$('#loginModal').on('show.bs.modal', function (e) {
     $('body').addClass('test');
});

this will addClass to your body and then using this

CSS:

.test[style] {
     padding-right:0 !important;
 }

and this will help you to get rid of padding-right.

But if you're also concerned about the hiding scroll then you've to add this too:

CSS:

.test.modal-open {
    overflow: auto;
 }

Here's the JSFiddle

Please have a look, it will do the trick for you.