Bootstrap 5 Modal 在动态添加一些内容后无法在滚动时正常工作 - 这会导致 Modal 的高度超过之前的高度

Question

Bootstrap 5 Modal 在动态添加一些内容后滚动时无法正常工作 - 这会导致 Modal 的高度超过之前的高度。

让我解释一下！

我通过单击 'Add Make' 按钮打开了一个 Bootstrap 模式。
Modal 刚刚正确显示，它有一个最多有 5 个输入的表单。

See attached image

Note: Still modal is working properly on scroll.

现在我只是在这些输入中输入了值。并且有 2 个 'file' 类型的输入，我用它来上传图像（一个用于 'icon'，另一个用于 'thumbnail'）。我还在每个输入类型文件的下方显示这些图像。这是一种预览框，让我显示将要上传的图像。
因为预览框默认是隐藏的。当我们 select 一个文件时，预览框会出现 selected 图片。

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)

但是，就我而言，Modal 没有正确滚动。我只是向下滚动，它会自动向后滚动。

简而言之，在向我的 Bootstrap 模态添加动态内容后，我的模态遇到了滚动问题，这改变了模态的动态高度。

我尝试了很多解决方案，但仍然无法解决这个问题。

我试过以下方法：

添加 overflow-y = auto
添加 overflow-y = scroll

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

我已添加关注

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

但是，还是失败了！

我终于要post解决我的问题了！

Answer 1

请记得在提问 Bilal 时附上您的代码。现在您可以尝试在 HTML 中添加 .modal-dialog-scrollable 和 .modal-dialog。这将向模态添加滚动条。

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

Bootstrap 5 Modal 在动态添加一些内容后无法在滚动时正常工作 - 这会导致 Modal 的高度超过之前的高度

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

modal-dialog

scrollbar

bootstrap-modal

bootstrap-5

bootstrap5-modal