Bootstrap body auto padding remove after open modal

Question

After open bootstrap modal a auto padding-right : 19px adding in body tag. I want to remove this auto padding. I have tried bellow code for modal and remove body auto padding.

<div class="media" data-toggle="modal" data-target="#kolpochitro"> 
             --------
</div>

Then I have written

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

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
              -------
        </div>
        <div class="modal-body">
              ------
        </div>
      </div>

    </div>
  </div>

After open modal my body tag looking at firebug

<body class="cbp-spmenu-push modal-open" style="padding-right: 19px;">

for remove this style I am trying bellow code

$('document').ready(function(){
            $('.media').click(function(){
                $("body").removeAttr("style");
            })
})

But it's not working.

Working for me: https://stackoverflow.com/a/65027287/7186739 — Billu, Nov 26 '20 at 18:45

score 6 · Answer 1 · answered Dec 05 '17 at 23:19

I had the same problem. Removing the inline style with Javascript as in the accepted answer will remove the padding but not until the modal is completely shown so it still results in kind of an erratic behavior. In the end I removed the padding with CSS, which will make sure there page content doesn't move and there is no padding at all times.

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

Hope this will help anyone with the same question.

score 4 · Accepted Answer · edited May 23 '17 at 12:24

4

Use shown function for updating it:

$('#modal-content').on('shown.bs.modal', function() {
       $("body.modal-open").removeAttr("style");
 });

Or For Previous version Bootstrap :

$('#modal-content').on('shown', function() {
        $("body.modal-open").removeAttr("style");
})

For more information check this link

edited May 23 '17 at 12:24

Community

1
1

answered Jul 08 '15 at 04:50

Rohit Arora

2,246
2
24
40

1

It's working fine when I have tried $('#kolpochitro').on('shown.bs.modal', function() { $("body.modal-open").removeAttr("style"); }); – Alimon Karim Jul 08 '15 at 04:59

score 1 · Answer 3 · edited Nov 16 '20 at 16:19

I know this is a years late answer, but just to let someone who got the same problem, you can face a second problem if you just go with Michael's solution, his solution help me a lot, but I was facing a second problem, when some modals were opened I just got a weird shifting on some elements, after trying some changes, I ended up using:

body:not(.modal-open){
  padding-right: 0px !important;
}

You will keep the padding when you open the modal and remove padding when is not present, with that you will solve not only the padding problem, also the shifting (you can get this, but not always), also you can keep the "fade" class, that will cause some problems too.

score 0 · Answer 4 · edited Aug 15 '23 at 18:57

0

CSS:

.modal-padding-overlap[style] {
  padding-right:0 !important;
  padding-left: 0 !important;
}

JavaScript:

modal.on('show.bs.modal', function () {
  $('body').addClass('modal-padding-overlap');
});

This will put 19px padding but no more as inline CSS has more importance.

edited Aug 15 '23 at 18:57

Tyler2P

2,324
26
22
31

answered Aug 13 '23 at 16:54

Babar Ali

1
2

this code is working for me for all modals this may insert 19px padding as initial but there will be no more padding inserted. – Babar Ali Aug 13 '23 at 17:03

Bootstrap body auto padding remove after open modal

4 Answers4