Search code examples
modal-dialogbootstrap-modalscrollbarbootstrap-5bootstrap5-modal

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

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.

  1. 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.

  2. 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.

  1. I have added following
<div class="modal-dialog modal-dialog-scrollable">

But, still failed !

Finally, I'm here to post my issue!

Solution

  • 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"