CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Alimon Karim
Alimon Karim

Reputation: 4469

Bootstrap body auto padding remove after open modal

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.

Upvotes: 5

Views: 14327

Answers (4)

Babar Ali
Babar Ali

Reputation: 1

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.

Upvotes: 0

Luis Alberto Sandoval Arevalo
Luis Alberto Sandoval Arevalo

Reputation: 11

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.

Upvotes: 1

Michiel
Michiel

Reputation: 2634

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.

Upvotes: 6

Rohit Arora
Rohit Arora

Reputation: 2252

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

Upvotes: 4

Related Questions