Kendo UI Angular对话框 - 自定义对话框宽度

Question

如何设置自定义对话框的宽度？

我尝试设置div的宽度，但没有区别。

任何帮助？

注意：我不使用<kendo-dialog></kendo-dialog>标签，因为它是一个自定义对话框

代码：

<template #itemListRef>
    <casts></casts>
</template>
<button (click)="showConfirmation(itemListRef)" class="k-button">Please confirm</button>
<div kendoDialogContainer></div>

Answer 1

指令答案：

看起来没有将宽度传递到对话框服务的选项。请参阅node_modules中的文件kendo-angular-dialog\dist\npm\dialog.service.js。

这意味着您必须使用Global CSS来设置框的宽度。您可以在附加指令的选择器上使用a类来指定：

HTML

<div class="dialog600">
    <div kendoDialogContainer></div>
</div>

CSS

.dialog600 .k-dialog {width: 600px}

<强> Plunker

旧答案，假设使用的组件：

您只需使用选择器上的[width]输入即可。

e.g。

<kendo-dialog [width]=1000>...</kendo-dialog>

这会将对话框设置为1000px宽。

但请注意，这有效地设置了对话框的max-width - 对话框不会溢出窗口。对话框的min-width也设置为450px，在主选择器内设置了.k-dialog标记：

如果你试图小于450px，你必须设置用你自己的样式覆盖min-width。