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 had this same problem for a VERY long time. None of the answers here worked! But the following fixed it!

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

There are two events that fire on closing of a modal, first it's hide.bs.modal, and then it's hidden.bs.modal. You should be able to use just one.

Answer 2

I just removed the fade class and change the class fade effect with animation.css. I hope this will help.

Answer 3

Bootstrap models add that padding-right to the body if the body is overflowing.

On bootstrap 3.3.6 (the version I'm using) this is the function responsible for adding that padding-right to the body element: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js/bootstrap.js#L1180

A quick workaround is to simply overwrite that function after calling the bootstrap.js file:

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

This fixed the issue for me.

Answer 4

As @Orland says if you are using some effect like fade then there we need to wait before displaying the modal, this is a bit hacky but will do the trick.

function defer(fn, time) {
    return function () {
        var args = arguments,
            context = this;

        setTimeout(function () {
            fn.apply(context, args);
        }, time);
    };
}

$.fn.modal.Constructor.prototype.show = defer($.fn.modal.Constructor.prototype.show, 350);

Answer 5

It occurs when you open a modal that previous modal is not completely closed yet. To fix it just open new modal at the time that all modal are completely closed, check codes below:

  showModal() {
    let closeModal = $('#your-modal');

    closeModal.modal('hide');
    closeModal.on('hidden.bs.modal', function() {
      $('#new-open-modal').modal('show');
    });
  }

Answer 6

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

Just changed to

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