Color Picker in Modal Popup display none

[david terek]

One of the pages that I have uses a Rad Color Picker inside of a modal popup.  When we upgraded our project to Q1 2009 of the ASP .NET AJAX suite, I noticed this page suddenly exhibited odd behavior.

When the modal popup appeared with the color picker on it, the color picker UI was completely messed up.  All the color rendered in one column down the page, the text boxes were on either side of the column along with the 'no color' button.

I finally realized that if I removed the 'display:none' attribute from the Panel being targetted by the Modal Popup Extender in the AJAX toolkit, the problem went away. 

Here is the code I used to display the issue:

    <asp:Button ID="btnShowModal" runat="server" Text="Show Modal Popup" />

    <asp:Panel ID="pnlModal" runat="server" CssClass="modalpopup" style="width:450px;display:none;">
        <div style="margin-top:5px;">
            <telerik:RadColorPicker ID="RadColorPicker1" runat="server" style="margin-left:5px;"></telerik:RadColorPicker>
        </div>
    </asp:Panel>

    <ajaxToolkit:ModalPopupExtender ID="ModalPopup1" runat="server" TargetControlID="btnShowModal" PopupControlID="pnlModal"
                                        X="200" Y="250"></ajaxToolkit:ModalPopupExtender>

The panel I refer to is "pnlModal".  The code above should display the odd behavior I described above.  But, once you remove the 'display:none' attribute from the style tag of "pnlModal" the problem is resolved.

Any reason this should occur changing from the Q4 2008 release to the Q1 2009 release?

[Tsvetie]

Hello David,
First of all, I am not quite sure which version you previously used as we do not have a Q4 2008 release. However, the change in the behavior you describe is a result of the following - we introduced client-side rendering for the RadColorPicker when ShowIcon=true. Now, there are two cases:

1. ShowIcon=true. The HTML for the palette is created on demand on the client and the calculations of the size for the elements in the palette are done on the client as well, as soon as the palette is created.
2. ShowIcon=false. The HTML for the palette is create on the server and the calculations of the size for its elements are performed on the server. However, we can only calculate the offsetWidth/offsetHeight correctly on the client and therefore the control recalculates the size of its elements to check whether those that have been applied are correct - in case they are not, the control sets the new sizes.

You are in the case ShowIcon=false. At the time when the control is loaded and checks weather the size, applied to its elements is correct, the control itself is in an element with "display:none" and thus offsetWidth returns 0.

That is why, I would recommend one of the following:

1. Use "visibility:hidden", instead of "display:none".
   or
2. Set the size of the RadColorPicker explicitly:

   <telerik:radcolorpicker id="RadColorPicker1" runat="server" Width="328px"
       style="margin-left: 5px;"></telerik:radcolorpicker>

Sincerely yours,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Eric]

Hello, 

I am also having a problem with the RadColorPicker in a modal popup panel. In particular, it appears that the embedded scripts are not functioning properly. When I hover over or select one of the colors, the text box at the top of the ColorPicker should update to show the hex value of the color selected. It is only updated irrregularly (E.g., if I click on the hex display area, then it will update on hover or select, sometimes) The RGB Slider panel also doesn't work correctly - if I change the value of one of the sliders and click Apply, nothing happens. I have tried setting the EnableEmbeddedScripts and EnableEmbeddedBaseStylesheet attributes to true, as well as removing the "display: none;" from the modal popup style, but I did not see a difference in behavior:

UPDATE: I apologize for not checking this earlier - the ColorPicker behaves in the expected way IF I set the ShowIcon property to true, however this is an unacceptable workaround for our intended usage of the control.

<div id="divPopup">
    <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
    <cc1:ModalPopupExtender runat="server" ID="mpeColorPicker" BehaviorID="mpbColorPopup"
        TargetControlID="hiddenTargetControlForModalPopup" PopupControlID="pnlColorPopup"
        BackgroundCssClass="modalBackground" DropShadow="True" PopupDragHandleControlID="pnlColorPickerHeader"
        RepositionMode="RepositionOnWindowScroll">
    </cc1:ModalPopupExtender>
    <asp:Panel runat="server" CssClass="modalPopupDesigner" ID="pnlColorPopup">
        <asp:Panel runat="Server" ID="pnlColorPickerHeader" Style="cursor: move; background-color: #DDDDDD;
            border: solid 1px Gray; color: Black; text-align: center;">
            Please choose a color...</asp:Panel>
        <asp:Panel ID="pnlColorChooser" runat="server">
            <telerik:RadColorPicker ID="rcpPanelColorChooser" Skin="Web20" runat="server" AutoPostBack="false" PaletteModes="All"
                ShowIcon="false" EnableEmbeddedScripts="true" EnableEmbeddedBaseStylesheet="true" Width="275px" EnableEmbeddedSkins="true">
            </telerik:RadColorPicker>
            <asp:Button ID="btnSelectColor" runat="server" Text="Select" UseSubmitBehavior="false"
                CausesValidation="false" OnClientClick="setColor(); return false;" />
            <input type="button" value="Cancel" id="btnCancelColorPicker" /></asp:Panel>
        <br />
    </asp:Panel>
</div>

Are there other known issues with putting a ColorPicker in a modal popup panel beside the issue you mentioned to David earlier in this thread?

Thank you,

Eric Johnson

[Tsvetie]

Hi Eric,
I am not aware of another problem that the RadColorPicker control has when used with the Modal Popup Extender except the problem with incorrect size of its elements, which is a general problem (manifests when the RadColorPicker is rendered in a parent with display:none) rather than something specific to the Modal Popup Extender.

As you do not mention which version and which browser you use, I tested your code with version 2009.1 402 under IE7, IE8 and FF3 and the only problem I was able to reproduce is not one of the problems you describe - the width of the RadSliders in the RGBSliders tab is not correct. This is something that you can reproduce even with ShowIcon=true and it is a problem in the code of the RadColorPicker control which we will fix it. However, I was not able to reproduce the problem with the preview box not refreshing while you hover over the color boxes in the WebPalette view. And, when I changed the value of a RGB slider, the preview updated as expected as well and when I clicked the Apply button, the currently previewed color was set as selected color, which is again expected.

Could you please prepare and send me a simple running project, demonstrating the problems you have as well as detailed information on each problem - e.g. steps to reproduce, result you get and expected result?

Basically, when you have ShowIcon=true the palette of the control is created on the client, whereas when you have ShowIcon=false, the palette is created on the server. However, this should not influence the functionality of the control.

Regards,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.