kendo-ui - Kendo UI Flatcolorpicker 在 Kendo UI 窗口中无法正确呈现

Question

KendoUI 版本 2013.3.1119使用 Kendo MVVM

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

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

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

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

我尝试过的

• 删除了它周围的所有其他 html，窗口内的结果相同。
• 试图强行设置轨道的大小。
• 使用 Chrome 开发工具来操作 CSS。
• 单步执行 Kendo UI javascript 以查看它最初呈现的位置。

什么有效，但不是解决方案

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

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

KendoUI 窗口设置:

{
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
})