在动态添加某些内容后，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

问题描述

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

让我解释一下！

1. 我通过单击"添加品牌"按钮打开了Bootstrap Modal。
2. Modal刚刚正确显示，并且它有一个最多有5个输入的表单。

See attached image

注意：静止模式在滚动上工作正常。

3. 现在我刚刚在这些输入中输入值。还有两个‘file’类型的输入，我用它来上传一个图像(一个用于‘图标’，另一个用于‘缩略图’)。我还在每个类型为file的输入下面显示了这些图像。这是一种预览框，用于显示要上载的图像。

因为预览框在默认情况下处于隐藏状态。当我们选择一个文件时，该预览框将与所选图像一起出现。

See attached image

注意：现在，模态高度已超过以前。已经走了 超出窗口高度。现在我们的模式应该随着我们的 滚动时的Windows滚动条。(这是……的常见行为。 模式)

但是，在我的情况下，Modal没有正确滚动。我只需向下滚动，它就会自动回滚。

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

我尝试了许多解决方案，但仍然无法解决此问题。

我尝试了以下方法：

1. 添加溢出-y=自动
2. 添加溢出-y=滚动

注意：即使我已经将-y溢出到auto。

3. 我添加了以下内容

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

但是，仍然失败！

终于，我在这里发布我的问题了！

推荐答案

请记住在提出问题Bilal时包括您的代码。目前，您可以尝试在HTML中的.modal-dialog旁边添加.modal-dialog-scrollable。这将向模式添加滚动条。

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

这篇关于在动态添加某些内容后，Bootstrap 5 Modal在滚动上不能正常工作-这会导致Modal的高度超过以前的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！