Bootstrap Modals keep adding padding-right to body after closed

Question

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?

Its not just add `padding-right` but also add class as `modal-open` for `overflow: hidden` its just for hiding the *scroll-bar*. — vivekkupadhyay, Sep 30 '15 at 09:30
@vivekkupadhyay Hi, I tried to override the `modal-open` with `padding-right:0 !important;` but it does not work, do you know why? — phuwin, Sep 30 '15 at 10:38
You almost got it. You're firing the `padding-right` css property update on the correct event, but you're firing it on the wrong element. It needs to be fired on the `body` element. Please check out my answer below. — Sam Malayek, Aug 21 '17 at 06:44

score 153 · Answer 1 · edited Aug 17 '16 at 12:23

153

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

body { padding-right: 0 !important }

edited Aug 17 '16 at 12:23

HasanG

12,734
29
100
154

answered Jun 13 '16 at 00:22

Ngatia Frankline

2,897
2
20
19

3

You've got the correct css property, but this needs to be fired on the `hide.bs.modal` bootstrap event. Please check out my answer below. – Sam Malayek Aug 21 '17 at 06:45

score 71 · Accepted Answer · answered Sep 30 '15 at 09:56

71

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.

answered Sep 30 '15 at 09:56

orlland

1,256
8
12

13

I removed the class `.fade` from `#loginModal` and it works. – phuwin Sep 30 '15 at 11:50
12

What if I want to fix this, and maintain modal animation at the same time? – Leonardo Montenegro Aug 17 '17 at 20:43
@LeonardoMontenegro I also wanted this and recently I also posted the same question the issue was animation was removed but I fixed it by first removing the fade class just before hiding and adding it again just after that hide it worked though it's a workaround not a proper solution unless bootstrap fixes it in there file itself – Kramer Sep 05 '18 at 06:59

score 69 · Answer 3 · edited Nov 08 '19 at 00:12

69

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

Just changed to

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

edited Nov 08 '19 at 00:12

Ofisora

2,707
2
14
23

answered Aug 12 '16 at 03:39

Suge

2,808
3
48
79

10

This is the real right answer - "don't use the fade feature" is a compromise, not a solution. – Tasgall Jul 08 '17 at 03:05
1

I did the same thing, but there might be a need to add "overflow: auto !important" as well because when the modal is shown, the scrollbar is also hidden. – Jaigus Oct 07 '17 at 18:17
I used the selector ".modal.fade.show" to target all my modals with the fade class. – Andrew Schultz Oct 23 '18 at 09:25
Adding the same styles to .modal.fade.show works too – Rami Zebian Apr 12 '19 at 11:15
Thanks! I needed both, because both the `modal` panel and `body.modal-open` had the padding. But this fixed it just nicely – Oliver Schimmer Jul 31 '20 at 11:31

score 42 · Answer 4 · edited Feb 13 '21 at 03:21

42

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.

edited Feb 13 '21 at 03:21

ezio4df

3,541
6
16
31

answered Dec 21 '17 at 11:37

chasmani

2,362
2
23
35

1

I don't know why someone would want no CSS solution. I want no JS solution. This one looks good. – Csaba Toth Feb 06 '18 at 07:36
1

I needed this because if I Dismissed the Modal (**_after_** an Asyc-Postback inside the Modal) then it would still retain that weird padding. However, I still needed @Benjamin Oats answer too for it to all work when I had any Scrollbars on the Page. – MikeTeeVee Jun 03 '19 at 04:25
this one works still great with Bootstrap 4. only solution that worked for me – linus Sep 17 '21 at 06:28

score 18 · Answer 5 · answered Sep 30 '15 at 09:47

18

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.

answered Sep 30 '15 at 09:47

vivekkupadhyay

2,851
1
22
35

Seems like it does not work. Or I did something wrong. It still adds `padding-right` to `body` and increases the amount of `padding-right` by 15px each time I close the Admin Panel. – phuwin Sep 30 '15 at 10:44
I've just checked your *link* it seems your code is not executing as its out-of `$(document).ready(function(){` try to put your *code* inside of it. – vivekkupadhyay Sep 30 '15 at 10:51
try putting an alert inside of your *code* then you can check that your *code* is not running. its working fine on fiddle and will work on your page too only if you use it accordingly – vivekkupadhyay Sep 30 '15 at 10:55
For a reason, the code does not run when the modal is shown. – phuwin Sep 30 '15 at 11:14
One thing I do not understand is that, if the Bootstrap `modal`s add a class to `body`, it should maintain the `padding-right` to 15px, not add 15px each time the `#adminPanel` is closed – phuwin Sep 30 '15 at 11:18
Its not just add `padding-right` but also add class as modal-open for overflow: hidden its just for hiding the **scroll-bar**, when the modal-box open, it tries to hide the scroll bar by adding the `padding-right` and when it closes it reset the `padding-right`. – vivekkupadhyay Sep 30 '15 at 11:20
What i don't understand from normal behaviour of bootstrap you mentioned is that it does not reset the padding-right, but add 15px padding-right to body, and increase the amount of padding right each time I closed the modals. I guess the guy below has his idea and it works. – phuwin Sep 30 '15 at 11:40
@PhuNguyen whatever floats your boat :) – vivekkupadhyay Sep 30 '15 at 11:41
1

@vivekkupadhyay Thank you so much for your effort. Have a nice day. – phuwin Sep 30 '15 at 11:49
@PhuNguyen glad to help :) – vivekkupadhyay Sep 30 '15 at 11:51
thank you very much... this solve my case without losing the animation – adjieq Mar 22 '20 at 13:30

score 14 · Answer 6 · edited Jun 29 '18 at 08:38

14

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.

edited Jun 29 '18 at 08:38

Rohit Suthar

3,528
1
42
48

answered Mar 19 '16 at 08:41

Ashok Sen

183
1
3

@Ashok Can you please elaborate the cause of the issue? – dude May 17 '16 at 13:16
9

This solution pointed me in the right direction. But, instead of modifying bootstrap.min.css, I put .modal-open{overflow:auto;padding-right:0 !important;} in my main theme stylesheet and it worked! – Pratyush Deb May 23 '16 at 12:09
5

Never edit bootstrap's css directly. Always add the overrides to the css in your own stylesheet. Just like @PratyushDeb suggested. – dotnetengineer Jun 03 '16 at 16:08
This isn't a great solution because it allows the content behind the modal to be scrolled. The modal grays out that content because the user is supposed to be interacting with it and only it. – ubiquibacon Jun 29 '19 at 07:38
This should be most reliable answer. Thanks – Hasnat Babur Aug 31 '20 at 19:14

Sam Malayek · Answer 7 · 2018-03-07T07:00:05.053

13

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.

edited Mar 07 '18 at 07:00

answered Jan 19 '17 at 18:04

Sam Malayek

3,595
3
30
46

3

It was not working for me when I added listener for both `hide.bs.modal` and `hidden.bs.modal`. But worked perfectly when I removed `hide.bs.modal` from the listener. :) – HariV Feb 22 '18 at 08:06
To the down-voter: Please leave constructive criticism in a comment so I can improve this answer. – Sam Malayek Jun 13 '18 at 23:37
@SamMalayek There are two issues, instead of `hide.bs.modal,hidden.bs.modal` one should use `show` and `shown` events, second `$('body').css('padding-right','0');` seems to be disregarded in the shown event somehow. – user31782 May 20 '22 at 05:08

Jack Vial · Answer 8 · 2018-01-18T15:16:50.083

5

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

edited Jan 18 '18 at 15:16

answered Dec 19 '17 at 23:47

Jack Vial

2,354
1
28
30

1

Works in Chrome! Thanks. – Gene Kelly Jan 18 '18 at 15:06
I had to replace `0px` with the amount shown by an inspector for the body in rest. Works in Firefox 98 and Chromium 99. Thanks! – dmitry_romanov Mar 13 '22 at 12:19

score 4 · Answer 9 · answered Feb 15 '17 at 14:25

4

easy fix

add this class

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

Its a override but works

answered Feb 15 '17 at 14:25

Benjamin Oats

573
1
8
25

1

This Class, combined with the answer posted by @Chasmani, made a total and complete solution for me. Also +1 for saying "_add this class_". It's crazy reading everyone's Responses here suggesting to override the Bootstrap.css file. Leave that file alone, and have your own CSS File where you apply any "_Bootstrap Overrides_". This is important so you may then document them all in one place, not lose them when updating/upgrading Bootstrap, and review them (to see if you still need the workarounds) after upgrading to a new Bootstrap Version. – MikeTeeVee Jun 03 '19 at 04:32
1

I agree @MikeTeeVee that you should definitely not edit the bootstrap css. I didn't include that in my answer because I figured its slightly out of the scope for answering this question – chasmani Jun 03 '19 at 10:18

score 3 · Answer 10 · answered Oct 11 '18 at 05:20

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.

score 2 · Answer 11 · edited Dec 10 '16 at 16:07

2

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

edited Dec 10 '16 at 16:07

Ninjakannon

3,751
7
53
76

answered Dec 10 '16 at 15:34

febriana andringa

21
3

score 2 · Answer 12 · edited Jun 21 '17 at 14:32

2

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.

edited Jun 21 '17 at 14:32

MCSI

2,818
26
35

answered Mar 09 '17 at 13:08

jcdsr

1,123
1
17
35

score 2 · Answer 13 · answered May 09 '17 at 09:03

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

score 2 · Answer 14 · answered Feb 13 '19 at 09:42

2

With Bootstrap 4 this worked for me:

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

answered Feb 13 '19 at 09:42

michal.jakubeczy

8,221
1
59
63

score 1 · Answer 15 · answered Feb 25 '17 at 02:59

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

score 1 · Answer 16 · answered May 19 '17 at 04:21

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.

score 1 · Answer 17 · answered Aug 30 '17 at 16:51

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.

score 1 · Answer 18 · answered Sep 30 '17 at 07:39

1

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

answered Sep 30 '17 at 07:39

tian

11
2

score 1 · Answer 19 · answered Mar 31 '22 at 12:05

1

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.

answered Mar 31 '22 at 12:05

Robert Went

2,944
2
17
18

score 0 · Answer 20 · edited Jul 10 '16 at 13:03

0

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

edited Jul 10 '16 at 13:03

chharvey

8,580
9
56
95

answered Jul 10 '16 at 08:56

Edison D'souza

4,551
5
28
39

score 0 · Answer 21 · answered Nov 30 '16 at 19:39

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

Dinoart · Answer 22 · 2016-12-18T02:33:42.897

0

This can solve the problem

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

edited Dec 18 '16 at 02:33

answered Dec 15 '16 at 03:03

Dinoart

11
1

score 0 · Answer 23 · answered Jun 21 '17 at 16:12

0

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

answered Jun 21 '17 at 16:12

Ruchita Kasliwal

19

score 0 · Answer 24 · answered Aug 29 '17 at 12:41

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.

score 0 · Answer 25 · answered Sep 07 '17 at 13:33

0

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

answered Sep 07 '17 at 13:33

user3666136

13
6

score 0 · Answer 26 · answered Oct 27 '17 at 14:00

0

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

answered Oct 27 '17 at 14:00

Sibaram Sahu

990
2
13
21

score 0 · Answer 27 · answered Jan 11 '18 at 10:18

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

score 0 · Answer 28 · answered Apr 24 '20 at 13:12

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.

score -1 · Answer 29 · answered Apr 07 '17 at 01:03

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

score -2 · Answer 30 · answered Dec 23 '16 at 23:08

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

score -2 · Answer 31 · answered Apr 20 '17 at 09:44

-2

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

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

answered Apr 20 '17 at 09:44

Sagar Raut

57
1
4

score -2 · Answer 32 · edited Jun 16 '17 at 18:34

-2

this should fix the issue

body {
    padding: 0 !important 
}

edited Jun 16 '17 at 18:34

hardkoded

18,915
3
52
64

answered Jun 16 '17 at 15:28

david

19
4

Bootstrap Modals keep adding padding-right to body after closed

32 Answers32

Linked