RadColorPicker doesn't display correctly after switching palette

[Roman]

Step to reproduce:
1. open radcolorpicker near to right bottom corner of window.
2. change(switch) palette
3. close colorpicker.
4. Open it again and you can see that color picker doesn't fit to window size.

[Slav]

Hi Roman,

You can use the following script in order to ensure that the palette of RadColorPicker will remain visible when selecting different tabs. Overall, you should handle the client-side click event when the palette tabs are clicked so that the popup window can be positioned accordingly. Also the height of the previously opened palette is stored in a variable, as it is needed for calculating the position of the popup:

var prevPaletteHeight = null;
var popupOpened = false;

function correctPopupPosition(picker, args) { // OnClientPopUpShow event handler
    if (!popupOpened) {
        var tabStrip = picker._tabStrip;
        $telerik.$(tabStrip).find("a").click(function () {
            positionPalette(picker);
        });
    }
    popupOpened = true;

    positionPalette(picker);

}

function positionPalette(picker) {
    var tabsHeight = 30;
    var bottomMargin = 30;
    var documentHeight = $telerik.$(document).height();
    var palette = $telerik.$(picker.GetPaletteContainer());
    var paletteHeight = palette.height();
    var paletteOffset = palette.offset();

    if (prevPaletteHeight && prevPaletteHeight < paletteHeight) {
        bottomMargin = paletteHeight - prevPaletteHeight;
        if (bottomMargin < 30) bottomMargin = 30;
    }

    if (paletteOffset.top + paletteHeight + tabsHeight >= documentHeight)
        palette.css({ top: palette.position().top - bottomMargin });
    prevPaletteHeight = paletteHeight;
}

Greetings,
Slav
the Telerik team

[Roman]

Hello Slav.

Thank you for a temporary solution.

We have plenty of color pickers on different forms. Therefore we cannot use the code you've provided.
It seems to be a bug of the control, and we really need this issue to be resolved permanently.

Looking forward to your reply.
Roman.

[Slav]

Hello Roman,

Indeed, we are aware of this bug in RadColorPicker's behavior and it will be addressed by our developers, although I cannot provide an exact estimate when a solution will be available.

For the time being, you can use the following approach:

1. Reference all the client-side objects of all RadColorPickers on your page by filtering them from the results of the method radControls:

function get_allRadColorPickers() {
    var allRadColorPickers = [];
    var allRadControls = $telerik.radControls;
    // all RadControls are referenced

    for (var i = 0; i < allRadControls.length; i++) {
        var element = allRadControls[i];

        if (Telerik.Web.UI.RadColorPicker && Telerik.Web.UI.RadColorPicker.isInstanceOfType(element)) {
            allRadColorPickers.push(element);
        }
    }
    // only the allRadColorPickers are gathered into an array

    return allRadColorPickers;
}

 
2. Iterate through the client-side objects of the RadColorPickers and attach the handler of the event popUpShow, which was provided in the previous post:

function pageLoad() {
    var radColorPickers = get_allRadColorPickers();
    for (var i = 0; i < radColorPickers.length; i++) {
        radColorPickers[i].add_popUpShow(correctPopupPosition);
    }
}

Greetings,
Slav
the Telerik team

[Roman]

Hello Slav.

Thanks for solution. It works when you open popup window, but not when you change palette.
Is it possible to workaround this problem ? 

Thanks in advance.
Roman.

[Slav]

Hi Roman,

The fix that I suggested should cover the repositioning of the palette popup when the mode of the RadColorPicker is changed. Please check the attached sample project and let me know if the problem is reproducible. In case you are still having difficulties, you can describe how do you recreate the issue and modify the attachment so that I can examine the problem locally and modify the solution accordingly. This screen capture tool will also be useful for recording the problem on your end so that I can reproduce it.

Regards,
Slav
the Telerik team