对话:如何使对话内容滚动？

Question

无论如何，有对话框的内容可滚动？我们有时有很多内容的对话框内容，我们只是希望它可以滚动。这里的示例带有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>

有关可运行的演示，请参见这个柱塞。

这是一个很好的特性，并且已经为即将出现的对话框版本的实现记录了日志。

Answer 2

设置高度属性将自动将滚动条添加到对话框中。

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

Answer 3

在当前的Kendo v5.0中(在角度上可能是相同的)，您可以确保所有对话框/窗口都不会使用CSS扩展到屏幕外：

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

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