对话框：如何使对话框内容可滚动？

Question

Dialog 的内容是否可以滚动？有时我们有很多内容的对话框内容，我们只是想让它滚动。这里使用 Boostrap 示例，只有模态内容可滚动：http://www.bootply.com/WaTI0dBpa3

Answer 1

此时对话框没有启用滚动的属性。您可以通过在对话框中添加一个可滚动的 div 元素并添加一些样式来实现此目的：

<kendo-dialog title="Dialog">
    <div style="height:200px; overflow:auto; padding:1.143em; margin:-1.143em;">
        <!-- content -->
    </div>

    <kendo-dialog-actions style="margin: 0">
        <button kendoButton>OK</button>
    </kendo-dialog-actions>
</kendo-dialog>

有关可运行的演示，请参阅 this plunker。

这是一个很好的功能，已记录在案，以便在即将发布的对话框版本中实现。

Answer 2

设置 [height] 属性会自动将滚动条添加到对话框中。

<kendo-dialog title="Update" (close)="closeEditProfileDetails()" [height]= 800>
content here....
</kendo-dialog>

Answer 3

在 Kendo React 的当前 v5.0 中（因此在 Angular 中可能相同）您可以确保所有 dialogs/windows 不会使用 CSS:

.k-window {
  max-height: 90vh;
}

在这种情况下，我将 window 的最大高度设置为屏幕高度的 90%，以便仍有一点点半透明背景显示，表明您仍在模态对话框中.

对话框：如何使对话框内容可滚动？

Dialog: how make dialog content scroll-able?

kendo-ui-angular2