Bootstrap Modals keep adding padding-right to body after closed

I am using Bootstrap and Parse framework to build a small web app. But those Bootstrap modals keep adding padding-right to the 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 web app. But those Bootstrap modals keep adding padding-right to the body after closed. How to solve this?

113463 次浏览
小开

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.

小开
最佳答案

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.

小开

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

body { padding-right: 0 !important }
小开

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');
小开 
.modal-open {
padding-right: 0px !important;
}

Just changed to

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

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

小开

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

小开

This can solve the problem

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

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

小开

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.

小开

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 have tried so many things but worked small thing for me.

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

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.

小开

this should fix the issue

body {
padding: 0 !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.

小开

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

小开 
body.modal-open{
padding-right: 0 !important;
}
小开 
$('.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.

小开

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

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 from 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.

小开

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

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 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.

小开

You can use Bootstrap's existing classes to fix this by adding pe-0 to the body tag.
That translates to

.pe-0 {
padding-right: 0 !important;
}

So if you have access to the body tag you don't need to add any additional CSS or javaScript.


提交答案