Was trying bootstrap full screen modal. I can see the modal but there is space on the right hand side. It is not expanding the whole screen. The same code works when run individually as show in this link: https://mdbootstrap.com/snippets/jquery/mustafaozkaya/789907?action=fullscreen . But when i integrate with my actual code this mess is created. Check image how the modal look with bootstrap and css code. Please see below image: Check the highlighted area.
Below is the code:
.modal-dialog-full-width {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
max-width:none !important;
}
.modal-content-full-width {
height: auto !important;
min-height: 100% !important;
border-radius: 0 !important;
background-color: #ffffff !important
}
.modal-header-full-width {
border-bottom: 1px solid #9ea2a2 !important;
}
.modal-footer-full-width {
border-top: 1px solid #9ea2a2 !important;
}
.row > div {
padding: 0 5px !important;
}
img {
margin-top: 8px;
vertical-align: middle;
} <!-- =======Pop UP Section ======= -->
<div class="container">
<!-- Modal -->
<div class="modal fade right" id="exampleModalPreview" tabindex="-1" role="dialog" aria-labelledby="exampleModalPreviewLabel" aria-hidden="true">
<div class="modal-dialog-full-width modal-dialog momodel modal-fluid" role="document">
<div class="modal-content-full-width modal-content ">
<div class=" modal-header-full-width modal-header text-center">
<h5 class="modal-title w-100" id="exampleModalPreviewLabel">This is trial pop up</h5>
<button type="button" class="close " data-dismiss="modal" aria-label="Close">
<span style="font-size: 1.3em;" aria-hidden="true">×</span>
</button>
</div>
<!-- ===============Below div is Middle part of popup-->
<div class="modal-body">
<!-- Start Photos-->
<div>
<div class="container">
<div class="row">
<div class=" col-sm-6 col-xs-6">
<img src="https://www.w3schools.com/w3images/wedding.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/ocean.jpg" class="img-fluid">
</div>
<div class="col-sm-6 col-xs-6">
<img src="https://www.w3schools.com/w3images/underwater.jpg" class="img-fluid">
<img src="https://www.w3schools.com/w3images/ocean.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- End Photos-->
<div class="container-fluid">
<h1 class="section-heading text-center wow fadeIn my-5 pt-3"> Not for money, but for humanity</h1>
</div>
</div>
<!-- ===============Below div is close button-->
<div class="modal-footer-full-width modal-footer">
<button type="button" class="btn btn-danger btn-md btn-rounded" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- =======End Pop Up Section ======= --> Please help me with the right side space between modal and scrollbar.
Thanks in advance!