I'm trying to make a bootstrap modal for my page. But whenever I try to close that modal, that modal will resize my entire page.
here is the gif that I took from my page :
also, I use this: .htm as my modal
I'm quite new with javascript and bootstrap, and I'm not really sure what to do to fix this. please help
Edit : i use :
<a href="#myModal1" data-toggle="modal">+Add Data</a>
to open :
<div class="bs-example">
<div id="myModal1" class="modal fade">
<div class="modal-dialog" style="width:70%!important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Add Credentials Data</h4>
</div>
<div class="modal-body">
//contenthere
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
to close it i use :
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
or
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
I'm trying to make a bootstrap modal for my page. But whenever I try to close that modal, that modal will resize my entire page.
here is the gif that I took from my page : https://ibb.co/iN5Bep
also, I use this: http://www.java2s./Tutorials/HTML_CSS/Bootstrap_Example/Dialog/Launch_a_modal_dialog_from_a_link_button.htm as my modal
I'm quite new with javascript and bootstrap, and I'm not really sure what to do to fix this. please help
Edit : i use :
<a href="#myModal1" data-toggle="modal">+Add Data</a>
to open :
<div class="bs-example">
<div id="myModal1" class="modal fade">
<div class="modal-dialog" style="width:70%!important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Add Credentials Data</h4>
</div>
<div class="modal-body">
//contenthere
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
to close it i use :
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
or
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
- can you share your approach? So, we can analyze what the issue might be? – vikscool Commented Sep 14, 2018 at 10:23
- i've added how i open and close the modal windows – Mabro Chickenz Commented Sep 14, 2018 at 10:31
3 Answers
Reset to default 2The problem you are facing is: your initial page, without the modal opened, fits in the browser. There is no need of scroll bar. But then you open the modal, and this modal doesn´t fit in the browser, and the scroll bar shows up taking some space. When you close the modal, the scroll bar disappears and everything is back to normal. You can create a modal that always fits in the window, and allow a scroll bar inside the modal if it's too big. Or you can save space in case the scroll bar shows up, so your elements page don't get moved around. You can look for a smaller custom scroll bar It dependes on requirements and tastes ;)
i solved it by making the body tag position fixed and adding a new div below it.
all thanks to @Ryan Brackett answer from : Fixed position div scrollable post
Sorry for resuming this old question, but I had the same problem on a legacy project and didn't find the solutions fit my requirements.
The problem is that Bootstrap adds a padding-right: 17px; inline style to the <body> when the modal is shown, to make up for the disappearing scrollbar in browsers where said scrollbar takes up actual space in the viewport (e.g. in all browsers on Windows, for example). But for some reason Bootstrap doesn't seem to take away that padding when the modal is hidden.
I solved this via JavaScript by simply resetting the style property on the modal hidden event:
$("#myModal1").on("hidden.bs.modal", function () {
$('body').css('padding-right', 0);
});
Might not be the cleanest of solutions but it did the job for me, without having to rethink the entire DOM.
I also think this might have been a problem with a particular Bootstrap release, so maybe it cloud have been solved in future updates. But in my case I didn't have time to update the version due to budget constraints.
Hope this helps someone!