1

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.com/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">&times;</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">&times;</button>

or

 <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
Omid Nikrah
  • 2,307
  • 3
  • 12
  • 27
Mabro Chickenz
  • 155
  • 1
  • 11

2 Answers2

2

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

Mabro Chickenz
  • 155
  • 1
  • 11
1

The 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 ;)

Arampg
  • 97
  • 6
  • ahh i see, so the easiest workaround is to shorten the content inside my modal. but i don't think i can make it any shorter (since it has multiple tables in it) – Mabro Chickenz Sep 14 '18 at 11:15
  • Add overflow / scrolling to the modal and give it a max height (no higher than the window of course)... – Stuart Sep 14 '18 at 11:21
  • @Stuart i've tried to add it to modal-dialog, modal fade, bs-example, and modal. still no luck. However if i add overflow:scroll to the body tag, the page will reisize to it's initial size on modal open and reducing the page width even more on modal close. i use bootstrap css as the css file – Mabro Chickenz Sep 16 '18 at 04:11