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。

這意味着您必須使用全局CSS來設置框的寬度。你可以使用一個類在連指定該指令的選擇：

HTML

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

CSS

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

Plunker

---

老回答，假設使用的組件：

您可以簡單地在選擇器上使用[width]輸入。

例如

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

這會將對話框設置爲1000px寬。

但是，請注意，這有效地設置對話框的max-width - 對話框不會溢出窗口外。對話框的min-width也風格450像素，作爲設置主選擇內與.k-dialog標籤：

如果你試圖去比450像素越小，你就必須設置用自己的造型覆蓋min-width。