Kendo UI Flatcolorpicker 在 Kendo UI Window 中无法正确呈现

Question

KendoUI版本2013.3.1119 使用 Kendo MVVM

我构建了一个颜色选择器，它使用平面颜色选择器和使用调色板的颜色选择器。它们都可以正常工作，但平面颜色选择器的布局已关闭，滑块的轨道未呈现为适当的宽度。

如果 flatcolorpicker 直接加载到页面中而不是 kendo window 中，它会正确呈现。

我没有应用任何特殊设置。

<div id="flatColorPicker"
     data-role="flatcolorpicker"
     data-bind="value: colorPaletteValue, enabled: enableColorSelection, events: { change: colorPaletteChange }">
</div>

我试过的

删除了它周围的所有其他 html，window.
试图强制设置轨道的大小。
使用 Chrome 开发工具来操作 CSS。
逐步查看 Kendo UI javascript 以查看其最初呈现的位置。

什么有效，但没有解决方案

初始加载后使用鼠标手动调整 window 的大小，然后它会自行更正。

有没有其他人遇到过这种情况或有任何其他想法可以尝试？

KendoUI Window 设置：

{
title: "Set Color",
resizable: false,
draggable: false,
width: 550,
height: 300,
actions: ["Close"]
}

Answer 1

运行进入同一问题：

我不知道这是否会为您修复它，但我通过在实例化之前确保选取器的容器元素可见来修复它。我的代码曾经看起来像：

$picker.kendoFlatColorPicker({
    // config
})
$container.show(); // $container contains the $picker

事实证明，如果我只是颠倒它开始工作的顺序：

$container.show(); // $container contains the $picker
$picker.kendoFlatColorPicker({
    // config
})

Kendo UI Flatcolorpicker 在 Kendo UI Window 中无法正确呈现

Kendo UI Flatcolorpicker does not render correctly in a Kendo UI Window

color-picker

kendo-ui

kendo-mvvm