0

I am hiding and showing modal in this sequence:

when I click on import button it will target modal with id="import-actionpopup" then I have two other button Append, and override when I upload file and select option then this import-actionpopup will be closed and then I have two other modal with id="warningOverrideAction" which will be openned on overrideButton button click and other modal with id="appendAction" which will be openned on appendButton click.

Now when I hide my warningOverrideAction or appendAction modal then it automatically adds padding-right:17px; to my body.

When I searched on stackoverflow I found that this is a glitch in bootstrap.css but my problem is that the padding remains even after the modal is hidden.

 $(document).ready(function(){

        $("#appendButton,#overrideButton").click(function(event){
            path=document.getElementById("zapper").value;
            if(path){       
             if($('#hinkSelect option:selected').prop('disabled') == true){
                   $('#reportError').modal('show');
                   document.getElementById('uploadError').innerHTML="<center>You have not selected any tool. <br>Make sure to select one tool.</center>";
                   document.getElementById('error_title').innerHTML="File Upload Error";
                  }
                  else{
                      toolName=document.getElementById('hinkSelect').value;
                      $('#import-actionpopup').modal('hide');
                      if(event.target.id==='overrideButton')
                      $('#warningOverrideAction').modal('show');
                      else if(event.target.id==='appendButton')
                      $('#appendAction').modal('show');
                      document.getElementById('hinkSelect').value='';
                  }
            }
            else{
                $('#reportError').modal('show');
                document.getElementById('uploadError').innerHTML="<center>You have not uploaded a zip file. <br>Make sure to upload a Zip file and try again.</center>";
                document.getElementById('error_title').innerHTML="File Upload Error";
            }
        });
    });
    function uploadScore(action){
            $("#appendAction").modal("hide");
            $("#warningOverrideAction").modal("hide");
            showPleaseWait();

            var baseUrl =url;
        $.ajax() calls-->                   
                    success: function(dataset){
                        if(dataset.error!=null){
                        $("#pleaseWaitDialog").modal("hide");

                        $('#reportError').modal('show');

                         document.getElementById('uploadError').innerHTML="<center>"+dataset.error+"</center>";
                         document.getElementById('error_title').innerHTML="Score Upload Failure";
                        }
                        else{
                        location.reload(true);
                        }
                    },

                    error : function(e){
                        console.log(e);
                    }
                });

            }

    function showPleaseWait() {
        var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false role="dialog">\<div class="modal-dialog">\<div class="modal-content">\<div class="modal-header" style="background-color:rgba(0,0,0,0.4);">\<h4 class="modal-title" style="color:black">Please wait while we import all your scores details...</h4>\</div>\<div class="modal-body" style="background-color:rgba(0,0,0,0.4);">\<img src="${pageContext.request.contextPath}/resources/images/spinner.gif" style="display: block; margin-left: auto; margin-right: auto;"/>\</div>\</div>\</div>\</div>';
        $(document.body).append(modalLoading);
        $("#pleaseWaitDialog").modal("show");
    }

Please help if there is a workaround

Kramer
  • 389
  • 8
  • 34
  • Possible duplicate of https://stackoverflow.com/questions/32862394/bootstrap-modals-keep-adding-padding-right-to-body-after-closed – Lalitkumar Tarsariya Sep 04 '18 at 10:23
  • I didn't get the answer according to my problem and my padding sticks to my body tag even after the modal is being closed – Kramer Sep 04 '18 at 10:28
  • Can you narrow down your code. I doubt something like an ajax request is relevant to the question – SuperDJ Sep 04 '18 at 10:32
  • @SuperDJ cut my code short please review – Kramer Sep 04 '18 at 10:37
  • @SuperDJ you can check this by coloring the body background and when it will shift you will see the changes – Kramer Sep 04 '18 at 10:38
  • removing fade class from import-actionpopup works but I want the effect too how do I dynamically remove these classes then add it again? – Kramer Sep 04 '18 at 10:49
  • it is working somehow I removed fade class of import-actionpopup using jquery before the modal hides – Kramer Sep 04 '18 at 10:53
  • Working for me: https://stackoverflow.com/a/65027287/7186739 – Billu Nov 26 '20 at 18:43

3 Answers3

5

Use css only: if you are using single modal (not using multiple modals, I means not using modal over another modal)

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

Use css and jquery script both: if you are using multiple modals, I means using modal over another modal). Note: add jquery script after jquery file

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


$(document).on('show.bs.modal', '.modal', function () {
     $("body").css("padding-right","0");
});

$(document).on('hide.bs.modal', '.modal', function () {
     $("body").css("padding-right","0");
});
Billu
  • 2,733
  • 26
  • 47
2

This worked for me:

body {
  padding-right:0 !important;
}

.modal-open {
  overflow:auto;
  padding-right:0 !important;
}
Abdullah Aman
  • 1,314
  • 11
  • 11
0

This worked for me:

Use js

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

use css

.modal-padding-overlap[style] {
    padding-right:0 !important;
    padding-left: 0 !important;
}
Hasan Ali Haolader
  • 39
  • 5