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 have just used the css fix below and it is working for me

body { padding-right: 0 !important }

Answer 2

I have same problem with Bootstrap 3.3.7 and my solution for fixed navbar: Adding this style to your custom css.

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

it will make your modal showed while scroll window still working. thanks, hope this will help you too

Answer 3

removeAttr won't work you will to remove the CSS property like this:

        $('.modal').on('hide.bs.modal', function (e) {
            e.stopPropagation();
            $('body').css('padding-right','');
        }); 

With no property value, the property is removed.

Answer 4

I dug into the bootstrap javascript and found that the Modal code sets the right padding in a function called adjustDialog() which is defined on the Modal prototype and exposed on jQuery. Placing the following code somewhere to override this function to do nothing did the trick for me (although I don't know what the consequence of not setting this is yet!!)

$.fn.modal.Constructor.prototype.adjustDialog = function () { };

Answer 5

This might be a glitch from Bootstrap modal. From my tests, it seems like the problem is that #adminPanel is being initialized while #loginModal has not been totally closed yet. The workarounds can be removing the animation by removing the fade class on #adminPanel and #loginModal or set a timeout (~500ms) before calling $('#adminPanel').modal();. Hope this helps.

Answer 6

$('.modal').on('hide.bs.modal,hidden.bs.modal', function () {
 setTimeout(function(){
  $('body').css('padding-right',0);
 },1000);
});

Try this

It will add the padding right 0px to the body after the modal close.