Problem with KeepInScreenBounds

[Andreas]

Hi,

When the colorpicker is located at the bottom of a page, it always cuts off the tabs at the bottom.

Se attached image from your demo!

http://demos.telerik.com/aspnet-ajax/colorpicker/examples/overview/defaultcs.aspx

Set "With a picker button" in the demo!

Regard
Andreas

[Slav]

Hi Andreas,

Indeed, it appears that the height of the popup element of RadColorPicker is not calculated correctly for its Lightweight rendering. As a result, the tabs of the palettes are not fully visible when KeepInScreenBounds is set to true.

I have logged the bug, although I cannot provide a firm estimation when an official fix will be available. You can use the linked bug item to track the status of the issue, vote for it and comment it: http://feedback.telerik.com/Project/108/Feedback/Details/181750. It also includes a workaround you can try until the issue is fixed.

I have updated your Telerik points as a small token of gratitude for reporting the issue at hand.

Regards,
Slav
Telerik

[Andreas]

Thanks!

Well this works in most cases, but we still have an issue when we reset the keepInScreenBounds with client script.
We do this since we have a div that is scrolling outside the ColorPicker and we need to re-position the ColorPicker when scrolling (when the popup is visible)!

From what I can see in the source javascript, there is an error in the RadColorPicker.set_keepInScreenBounds, if setting this to true when the popup is visible it does the following:

var popupBehavior = this._popupBehavior;
if (popupBehavior)
{
    popupBehavior.set_keepInScreenBounds(value);

    //If the popup is visible, re-show it.
    if (this._showIcon && this._paletteDisplayed)
        popupBehavior.show();
}

This code will hide the tabs completely since this only measures the height without the tabs!

When the popup is displayed from the color-button it does the following to take care of keepInScreenBounds:

if(this.get_keepInScreenBounds())
{
    this._paletteWrapperElement._originalHeight = this._paletteWrapperElement.style.height;
    this._paletteWrapperElement.style.height = this.getPaletteHeight() + "px";
}
popupBehavior.set_x(0);
popupBehavior.set_y($telerik.getSize(this._iconWrapperElement).height + yCorrectionToGetLocation);
popupBehavior.show();

if(this.get_keepInScreenBounds())
{
    this._paletteWrapperElement.style.height = this._paletteWrapperElement._originalHeight;
    this._paletteWrapperElement._originalHeight = null;
}

Should't this code also be called in the set_keepInScreenBounds function?

Regard
Andreas

[Slav]

Hello Andreas,

The purpose of the set_keepInScreenBounds client-side method is to be called when you need to change the value of the KeepInScreenBounds property on the client. Nevertheless, you are correct that since the method is designed to update the position of the popup when the value of the property is updated, it should move the whole RadColorPicker in the visible area.

I have logged a new bug  item for this issue: http://feedback.telerik.com/Project/108/Feedback/Details/182087

As for your scenario, there are two methods of the client-side API of RadColorPicker that you can use to update the position of the popup: showPalette and hidePalette. You can prepare a method, similar to the following one and call it each time you need to update the position of the popup palette:

function getColorPicker() {
    return $find("<%=ColorPicker1.ClientID %>");
}

function resetPopup() {
    var colorPicker = getColorPicker();
    colorPicker.hidePalette();
    colorPicker.showPalette();
}

I have updated your Telerik points again for reporting the second issue.

Regards,
Slav
Telerik