kendo-uicolor-pickerkendo-mvvm

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

KendoUI version 2013.3.1119 Using Kendo MVVM

I have a color selector that I have build that uses a flat color picker and a color picker using a palette. They both function correctly but the layout of the flat color picker is off where the track for the slider does not render to the appropriate width.

enter image description here

If the flatcolorpicker is loaded directly in a page and not in a kendo window it renders correctly.

There are not any special settings I am applying.

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

What I have tried

What worked, but not a resolution

Manually re-size the window using the mouse after initial load, it then corrects itself.

enter image description here

Has anyone else experienced this or has any other ideas to try?

KendoUI Window settings:

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

  • Ran in to the same issue:

    enter image description here

    I don't know if this will fix it for you, but I fixed it by making sure the picker's container element was visible before instantiating it. My code used to look like:

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

    Turns out if I just reverse the order it started working:

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

    enter image description here