Bootstrap Modals keep adding padding-right to body after closed

Javascript Jquery Html Css Twitter Bootstrap

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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

body { padding-right: 0 !important }

Solution 2 - Javascript

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.

Solution 3 - Javascript

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

Just changed to

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

Solution 4 - Javascript

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.

Solution 5 - Javascript

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.

Solution 6 - Javascript

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.

Solution 7 - Javascript

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.

Solution 8 - Javascript

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

Solution 9 - Javascript

easy fix

add this class

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

Its a override but works

Solution 10 - Javascript

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.

Solution 11 - Javascript

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

Solution 12 - Javascript

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.

Solution 13 - Javascript

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

Solution 14 - Javascript

With Bootstrap 4 this worked for me:

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

Solution 15 - Javascript

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

Solution 16 - Javascript

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.

Solution 17 - Javascript

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.

Solution 18 - Javascript

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

Solution 19 - Javascript

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

Solution 20 - Javascript

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

Solution 21 - Javascript

This can solve the problem

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

Solution 22 - Javascript

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

Solution 23 - Javascript

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.

Solution 24 - Javascript

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

Solution 25 - Javascript

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

Solution 26 - Javascript

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

Solution 27 - Javascript

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.

Solution 28 - Javascript

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.

Solution 29 - Javascript

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

Solution 30 - Javascript

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

Solution 31 - Javascript

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

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

Solution 32 - Javascript

this should fix the issue

body {
    padding: 0 !important 
}

Content Type	Original Author	Original Content on Stackoverflow
Question	phuwin	View Question on Stackoverflow
Solution 1 - Javascript	Ngatia Frankline	View Answer on Stackoverflow
Solution 2 - Javascript	orlland	View Answer on Stackoverflow
Solution 3 - Javascript	Suge	View Answer on Stackoverflow
Solution 4 - Javascript	chasmani	View Answer on Stackoverflow
Solution 5 - Javascript	vivekkupadhyay	View Answer on Stackoverflow
Solution 6 - Javascript	Ashok Sen	View Answer on Stackoverflow
Solution 7 - Javascript	Sam Malayek	View Answer on Stackoverflow
Solution 8 - Javascript	Jack Vial	View Answer on Stackoverflow
Solution 9 - Javascript	Benjamin Oats	View Answer on Stackoverflow
Solution 10 - Javascript	Gauravbhai Daxini	View Answer on Stackoverflow
Solution 11 - Javascript	febriana andringa	View Answer on Stackoverflow
Solution 12 - Javascript	jcdsr	View Answer on Stackoverflow
Solution 13 - Javascript	Madalina Taina	View Answer on Stackoverflow
Solution 14 - Javascript	michal.jakubeczy	View Answer on Stackoverflow
Solution 15 - Javascript	Debrian Ruhut Saragih	View Answer on Stackoverflow
Solution 16 - Javascript	Cleber de Souza Alcântara	View Answer on Stackoverflow
Solution 17 - Javascript	scottx	View Answer on Stackoverflow
Solution 18 - Javascript	tian	View Answer on Stackoverflow
Solution 19 - Javascript	Edison D'souza	View Answer on Stackoverflow
Solution 20 - Javascript	Phil	View Answer on Stackoverflow
Solution 21 - Javascript	Dinoart	View Answer on Stackoverflow
Solution 22 - Javascript	Ruchita Kasliwal	View Answer on Stackoverflow
Solution 23 - Javascript	Lucas Almeida	View Answer on Stackoverflow
Solution 24 - Javascript	user3666136	View Answer on Stackoverflow
Solution 25 - Javascript	sibaspage	View Answer on Stackoverflow
Solution 26 - Javascript	Sakata Gintoki	View Answer on Stackoverflow
Solution 27 - Javascript	Lo Bellin	View Answer on Stackoverflow
Solution 28 - Javascript	Robert Went	View Answer on Stackoverflow
Solution 29 - Javascript	netomo	View Answer on Stackoverflow
Solution 30 - Javascript	wkirk	View Answer on Stackoverflow
Solution 31 - Javascript	Sagar Raut	View Answer on Stackoverflow
Solution 32 - Javascript	david	View Answer on Stackoverflow