ColorPicker not displaying correctly under ie7

[Ed]

I am hoping someone can solve my issue with the colorpicker.  I need to add a colorpicker icon to the radpanelbar but all it seems to do is display the icon on its initial load (even outside the scrolling region) and when the scroll bar is moved, the colorpicker icons remain in place.

I have started with the demo of the Scheduler / First Look which shows on the left side of the splitter, 2 stacked calendars and a radPanelBar with selectable "Team Calendars" and "My Calendar".  I have a replaced the existing radPanelBar of the demo with mine as follows:

<telerik:RadPanelBar id="rpbMyCalendars" runat="server" width="220px" ExpandMode="MultipleExpandedItems"

PersistStateInCookie="true" CookieName="xyzMyCalendarPanelBarCookie"/>

I have isolated a bit of test code to populate this radPanelBar by calling the function testLoad() during Page Load:

protected void testLoad()
{
    rpbMyCalendars.Items.Clear();
    createPanel(1, 8);
    createPanel(2, 8);
}

protected void createPanel(int panelNum, int count)
{
    var rpiRoot = new RadPanelItem("Root Panel " + panelNum);
    rpbMyCalendars.Items.Add(rpiRoot);

    for (var i = 1; i < count; i++ )
    {
        var rpiSub = new RadPanelItem("");
        rpiRoot.Items.Add(rpiSub);

        var literal = new Literal
        {
            Text = "<div title='Sub Panel " + i + "'>Sub Panel " + i + "</div>",
            ID = "tx_" + i,
        };
        rpiSub.Controls.Add(literal);

        var cp = new RadColorPicker
        {
            ID = "cp_" + i,
            ShowIcon = true,
            SelectedColor = Color.FromArgb(i * 0x100 + i * 0x10 + i),
            PaletteModes = PaletteModes.HSB,
            AutoPostBack = true
        };
        cp.ColorChanged += cpMyCalendar_OnColorChanged;
        rpiSub.Controls.Add(cp);
    }
}

This works just fine under IE8, Google Chrome, Firefox and Safari.  But under IE7, I get rendering issues of the colorpicker icon as show in the attached picture.  When I scroll the left side, the colorpicker icons remain where they were initially rendered.

I attempted to add the style rule "position:relative" to the owning parent(s) but all this did was make the parent exhibit the same behavior as the icon.

Thanks in advance for helping me out on this.

Ed

[Tsvetie]

Hello Ed,
The problem you report is indeed a result of the IE7 bug with relative elements, defined in a scrollable element. You should not apply relative position to the parent elements - the fix is it to apply relative position only to the scrollable parent element. You can find the element that is the scrollable parent using tools such as IE Developer Toolbar for IE or Firebug for FF.

Greetings,
Tsvetie
the Telerik team

[Ed]

The fix you suggested works after applying it to the scrollable parent element.  However, a side effect is that when clicking on the icon to bring up the color picker box, it now is contained only within the region of the scrollable parent element.  See attached picture.  This behavior is not limited to IE7 but others as well (IE8 and Chrome).

Ed

[Niko]

Hi Ed,

When having an HTML element with overflow set to hidden, the content will always be clipped at the edges of the element. This is true even for content that is absolute positioned. This is reason for the unwanted behavior.
Still there is a way to work around this. The idea is to put the absolutely positioned color picker palette in another element and thus taking it out of the clipping behavior of the old parent into a new one that is set with overflow to visible. Please find attached a sample project taken from the Scheduler First Look example with your changes and the incorporated workaround.
Here are the steps to implement it:

1. Right before the left pane add another pane that will take the role of the new parent:

   <telerik:RadPane runat="server" ID="dummyPane" Width="0" Height="0" CssClass="RadColorPicker RadColorPicker_Default dummyPane" />

2. For the color pickers set a client handler for the OnClientPopUpShow. In this case I named it showColorPicker
3. At page load set the needed additional CSS declaration to the dummy pane. I used JavaScript to do this in order to set the style attributes directly (using CSS may not override the default rules for the skin resources). I used the jQuery ready method
   

   $telerik.$(document).ready(function()
   {
       var dummyPane = $telerik.$("#<%= dummyPane.ClientID %>");
       dummyPane.css({borderWidth: 0, position: "relative", zIndex: 1000});
       var dummyChild = dummyPane.children().first();
       dummyChild.css({overflow: "visible", height: 0, position: "relative", zIndex: 1000});
   });

4. Finally implement the showColorPicker function. Here is my sample:

   function showColorPicker(sender, args)
   {
       var dummyPane = $get("<%= dummyPane.ClientID %>").firstChild;
       var pickerWindow = sender.getPaletteContainer();
       dummyPane.appendChild(pickerWindow);
   }

Greetings,
Nikodim
the Telerik team

[Ed]

Thanks for your assistance.  This fixes the issue.

I only had to do a couple of minor tweaks.  Don't know why the width and height were not being honored as I was getting a 20px wide column for the dummy pane.  I added "width:0px !important" and "height:0px !important" to the dummyPane class and that fixed the problem.