Bootstrap 5 Modal does not work properly on scroll, after adding some content dynamically - which cause Modal's height exceeds than earlier

Question

Bootstrap 5 Modal does not work properly on scroll, after adding some content dynamically - which cause Modal's height exceeds than earlier.

Let me explain!

1. I opened a Bootstrap Modal by clicking on the 'Add Make' button.
2. Modal just appeared properly, and it have a form having up to 5 inputs.

See attached image

Note: Still modal is working properly on scroll.

3. Now I just entered values in these inputs. And there are 2 inputs of type 'file', which I am using to upload a Image (One for 'icon' and Other one is for 'thumbnail'). And I am also showing these images underneath each of this input of type file. Which is a kind of preview box for me to show that Image which is going to be uploaded.

4. As that preview box is hidden by default. And when we select a file then that preview box appears with the selected image.

See attached image

Note: Now, modal height has been exceeded than before. And has gone out of windows height. And now our modal should scroll along with our windows scroll-bar on scrolling. (This is the common behavior of modal)

But, in my case, Modal is not getting scrolled properly. I just scroll down, and it scroll back automatically.

In short, I am facing a scrolling issue with my modal after adding dynamic content to my Bootstrap modal which change modal's dynamic height.

I have tried many solution but still failed to resolve this issue.

I have tried the following:

1. Adding overflow-y = auto
2. adding overflow-y = scroll

Note: Even already, I have overflow-y to auto.

3. I have added following

<div class="modal-dialog modal-dialog-scrollable">

But, still failed !

Finally, I'm here to post my issue!

Answer 1

Adding style="overflow: scroll !important;" will force the scrollbar to show

<div class="modal-dialog  modal-xl modal-fullscreen modal-dialog-scrollable"  style="overflow: scroll !important;">

Answer 2

I had the same issue and solved by adding style="overflow:scroll" to the main div of the modal

    <div class="modal fade" tabindex="-1" role="dialog" style="overflow:scroll">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 3

Please remember to include your code when asking question Bilal. For now you could try adding .modal-dialog-scrollable alongside .modal-dialog in your HTML. Ths will add a scroll bar to the modal.

class=" modal-dialogue modal-dialog-scrollable"