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

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

我尝试设置div的宽度,但没有区别 .

有帮助吗?

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

码:

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

回答(1)

2 years ago

Directive Answer:

它没有't look like there'是一个将宽度传递给对话服务的选项 . 请参阅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


Old Answer, assumed component used:

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

例如

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

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

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

k-dialog width

如果您必须使用自己的样式设置覆盖 min-width .