RadColorPicker breaks DIV

8 posts, 1 answers
  1. Alexander
    Alexander avatar
    6 posts
    Member since:
    Jun 2009

    Posted 03 Aug 2009 Link to this post

    Hi,

    We have problems with the appearance of the RadColorPicker Colorpalette
    The Pagelayout is a 3 Row Layout with a 2 Column Layout in the Center. In the Laft Pane we have a RadDockLZone (width ~250 height ~500) with several RadDocks. So the Left side loocks a little bit like acdordion Panes made by movable RadDocks. In one RadDock we have two Icons to let the User choose a color. But when I click the Icon, the ColorPalette will appear just below the Icon. This results in Scrollbars and in hidden Overflows. What we like to do is that the Colorpicker Palette opens in a DIV above the others div. so that it will not scale the div where the ColorPicker Icon is located.

    Do you have any idea ?

    thank you Alex.
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Aug 2009 Link to this post

    Hello Alex,
    The popup palette of the RadColorPicker is rendered right where the RadColorPicker is defined on the page - in your case, in the RadDock. The RadDock shows scrollbars when its content exceeds in size the size of the dock itself. You can think of the dock in this case as of DIV element with size, overflow:auto and position and of the RadColorPicker palette - as DIV with size and position. However, as the color picker is a child of the dock, it cannot show outside of the dock.

    That is why the only thing that I can suggest in this case is that you configure the RadDock so that it is large enough to show all its content when the palettes of the color pickers are hidden and set "overflow:visible" for the elements of the Dock. For example:
    <head runat="server"
        <title></title
         
        <style type="text/css"
        div.DockWithColorPicker, 
        div.DockWithColorPicker .rdHTitlebar, 
        div.DockWithColorPicker .rdContent 
        { 
            overflow:visible !important; 
        } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <telerik:RadDock ID="RadDock1" runat="server" Width="200px" Height="200px" CssClass="DockWithColorPicker"
            <ContentTemplate> 
                <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true"
                </telerik:RadColorPicker> 
            </ContentTemplate> 
        </telerik:RadDock> 
        </form> 
    </body> 


    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Juergen Puscher
    Juergen Puscher avatar
    5 posts
    Member since:
    Jul 2009

    Posted 06 Aug 2009 Link to this post

    Hello Tsvetie,

    thank you for you answer,
    but extending the size of the Parentcontainer is a nogo for us. So I've to find another Solution. I try to prototype 2 different ways.
    1. hook the JavaScript Function which create the Palette DIV - looks very stragen :-(
    2. hook the click event on the colorPalette Icon and show another ColorPalette, which was invisible before..

    I think i would prefer the second way, but I currently dont know how i can hook the Click Event of the PreviewColor Icon.
    Do you have any Idea ?

    regards

    Alex
  5. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Aug 2009 Link to this post

    Hi Juergen Puscher,
    You can get a reference to the button that opens the palette of the RadColorPicker the following way:
    colorPicker._iconWrapperElement 

    However, instead of defining two color pickers on the page, you can move the palette of the RadColorPicker in the DOM to the BODY element. For example:
    <head runat="server"
        <title></title>     
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <telerik:RadDock ID="RadDock1" runat="server" Width="200px" Height="200px"
            <ContentTemplate> 
                <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true" PaletteModes="All"
                </telerik:RadColorPicker> 
            </ContentTemplate> 
        </telerik:RadDock> 
         
        <script type="text/javascript"
        Telerik.Web.UI.RadColorPicker.prototype._oldCreateTabStrip = Telerik.Web.UI.RadColorPicker.prototype._createTabStrip; 
        Telerik.Web.UI.RadColorPicker.prototype._createTabStrip = function() 
        { 
            this._oldCreateTabStrip(); 
             
            var wrapper = document.createElement("div"); 
            wrapper.className = "RadColorPicker RadColorPicker_" + this._skin; 
            document.body.appendChild(wrapper); 
             
            wrapper.appendChild(this._paletteWrapperElement); 
        }; 
        </script> 
        </form> 
    </body> 


    All the best,
    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.
  6. Johan
    Johan avatar
    3 posts
    Member since:
    Dec 2008

    Posted 10 Feb 2010 Link to this post

    How can I do this in this special case

    We have a modal popup that we developed ourselves (no Telerik control). The content area is a div with overflow:auto;
    When I place the colorpicker inside I get the same issue as the original author of this thread. I added your example to my control.

    Public Class ColorPicker 
            Inherits Telerik.Web.UI.RadColorPicker 
     
            Public Sub New() 
                Me.PaletteModes = Telerik.Web.UI.PaletteModes.HSV 
                Me.ShowEmptyColor = True 
                Me.ShowIcon = True 
                Me.Preset = Telerik.Web.UI.ColorPreset.Web216 
                Me.Skin = "Office2007" 
                Me.AutoPostBack = True 
            End Sub 
     
            Private Sub ColorPicker_Init(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Init 
                Dim script As XElement = <script type="text/javascript">                                      
                                           Telerik.Web.UI.RadColorPicker.prototype._oldCreateTabStrip = Telerik.Web.UI.RadColorPicker.prototype._createTabStrip;  
                                            Telerik.Web.UI.RadColorPicker.prototype._createTabStrip = function()  
                                            {  
                                                this._oldCreateTabStrip();  
                                                  
                                                var wrapper = document.createElement("div");  
                                                wrapper.className = "RadColorPicker RadColorPicker_" + this._skin;  
                                                document.body.appendChild(wrapper);  
                                                  
                                                wrapper.appendChild(this._paletteWrapperElement); 
                                            }; 
                                       </script> 
     
                ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType"testscript", script.ToString, False
            End Sub 
        End Class 

    It works very well until I pick a color. The postback that is excecuted doesnt complete. I see the ajax loading animation for eternity. How could I make this work?


  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 11 Feb 2010 Link to this post

    Hi Johan,
    In case you have ajaxified the RadColorPicker control, you should make sure that its palette elements is added to the UpdatePanel that wraps the color picker and not to document.body. Otherwise the color picker will not be ajaxified and you will get an error, when you try to select a color. For example:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
     
        <script type="text/javascript">
            Telerik.Web.UI.RadColorPicker.prototype._oldCreateTabStrip = Telerik.Web.UI.RadColorPicker.prototype._createTabStrip;
            Telerik.Web.UI.RadColorPicker.prototype._createTabStrip = function()
            {
                this._oldCreateTabStrip();
     
                var wrapper = this._newPaletteWrapper;
                if(!wrapper)
                {
                    wrapper = this._newPaletteWrapper = document.createElement("div");
                    wrapper.className = "RadColorPicker RadColorPicker_" + this._skin;
                }
     
                $get("<%= RadAjaxpanel1.ClientID %>").appendChild(wrapper);
                wrapper.appendChild(this._paletteWrapperElement);
            };
        </script>
     
    </telerik:RadCodeBlock>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel ID="RadAjaxpanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <cc:ColorPicker ID="ColorPicker1" runat="server">
        </cc:ColorPicker>
    </telerik:RadAjaxPanel>

    I have made one additional small change to the javascript in order to make sure that the DIV element that we move the palette to, is create only once.

    Best wishes,
    Tsvetie
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  8. Johan
    Johan avatar
    3 posts
    Member since:
    Dec 2008

    Posted 11 Feb 2010 Link to this post

    Thanks!
    That works perfectly, the first time only unfortunately..
    Once I picked a color I can't pick again. I get a javascript error, "too much recursion". Doesnt look like a standard javascript error so I guess it's a Telerik error? What can I do to get it working?
  9. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 16 Feb 2010 Link to this post

    Hello Johan,
    I was not able to reproduce this problem with my test page. Could you please open a new support ticket and send me a simple running project that demonstrates it?

    Kind regards,
    Tsvetie
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017