Bootstrap Modals keep adding padding-right to body after closed

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 tried to put this code in my javascript:

$('.modal').on('hide.bs.modal', function (e) {
    $("element.style").css("padding-right","0");
});

But it doesn't work. Does anybody know how to fix this?

My code:

        <button type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Admin panel</button>

         <div id="loginModal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-sm">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Login</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body text-center" >
                          <input class='form-control' type="text" id="userName" placeholder="Username" ng-model='username'>
                          <input class='form-control' type="password" id="password" placeholder="Password" ng-model='password'>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="loginButton" ng-click="goToAdminPanel()">Login</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>
                      </div>

                    </div>

                 </div>
                </div>
           </div>

        <div id="adminPanel" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Admin Panel</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body" >

                        </div>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="saveButton">Save</button>

                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>



                    </div>

                 </div>
                </div>
           </div>

    $scope.goToAdminPanel = function(){
    Parse.User.logIn($scope.username,$scope.password,{
        success: function(user){
            $('#loginModal').modal('hide');
            $('#adminPanel').modal();
        },
        error: function(user, error) {
            alert('Wrong username and/or password');
        }
    });
}

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?

Answers


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.


I have just used the css fix below and it is working for me

body { padding-right: 0 !important }

Just add a style like that:

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

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.


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.


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.


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.


easy fix

add this class

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

Its a override but works


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


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.


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');

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


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;
        }

My solution does not require any additional CSS.

As pointed by @Orland, one event is still happening when the other starts. My solution is about starting the second event (showing the adminPanel modal) only when the first one is finished (hiding the loginModal modal).

You can accomplish that by attaching a listener to the hidden.bs.modal event of your loginModal modal like below:

$('#loginModal').on('hidden.bs.modal', function (event) {
    $('#adminPanel').modal('show');
}

And, when necessary, just hide the loginModal modal.

$('#loginModal').modal('hide');

Of couse you can implement your own logic inside the listener in order to decide to show or not the adminPanel modal.

You can get more info about Bootstrap Modal Events here.

Good luck.


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.


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

This is what worked for me:

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

// Bootstrap uses JS to set the element style so you can
// override those styles like this
body.modal-open[style] {
    padding-right: 0px !important;
}

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.


With Bootstrap 4 this worked for me:

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

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 () { };


This can solve the problem

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

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;
}

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.


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 (?)


$('.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.


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');
    });
  }

(Bootstrap v3.3.7) From my browser inspector i saw that this is directly set in the element style property, witch overrides class properties.

I tryed to 'reset' the paddig-right value when the modal is showing with :

$("#myModal").on('shown.bs.modal', function(){
    $(this).css({paddingRight:""});
});

But it comes back as soon as the window is resized :( (probablly from the pluggin script).

This solution worked for me :

var modal_needfix=true;
$("#myModal").on('shown.bs.modal', function(){
    var modalscope=$(this);
    modalscope.css({paddingRight:""});
    if(modal_needfix){
        window.addEventListener("resize",function(){
            requestAnimationFrame(function(){// be sure to act after the pluggin script
                modalscope.css({paddingRight:""});
            });
        });
        modal_needfix=false;
    }
});

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

I hope there is still someone who needs this answer. There is a function called resetScrollbar() in bootstrap.js, for some stupid reason the developers decided to add the scrollbar dimensions to the body's padding right. so technically if you just set right-padding to an empty string it will fix the problem


I have tried so many things but worked small thing for me.

    body {
    font-size: 12px;
    font-family: brownFont;
    padding-right: 0 !important ;
}

Need Your Help

How to make HTTP POST web request

c# .net post httpwebrequest httprequest

Canonical: How can I make an HTTP request and send some data using the POST method?