kendo-ui-angular2 - 对话框：如何使对话框内容可滚动？

Question

无论如何让Dialog的内容可以滚动？我们有时会有很多内容的 Dialog 内容，我们只是想让它可以滚动。这里是带有 Boostrap 的示例，只有模态内容可滚动： http: //www.bootply.com/WaTI0dBpa3

Answer 1

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

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

Answer 2

此时对话框没有启用滚动的属性。您可以通过在对话框中添加可滚动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>

请参阅此 plunker以获取可运行的演示。

这是一个很好的功能，并已记录为即将推出的对话框版本的实现。

Answer 3

在当前v5.0的 Kendo React 中（在 Angular 中可能相同），您可以使用 CSS 确保所有对话框/窗口不会延伸到屏幕外：

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

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