ColorPicker remains invisible if not scrolled in view on page load

2 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    92 posts
    Member since:
    Feb 2007

    Posted 22 Jun 2009 Link to this post

    Hi,

    I have a dynamically generated page which generates amongst other things, a list of color picker controls, which allows the user to select a colour for a line on a chart.  The page is displayed within a RadPane control in a RadSplitter.  The issue is that if the list of items is long, any colour pickers which are situated off the visible area of the screen remain invisible when the screen is scrolled down to view them.  The only thing that sometimes gets them to appear is resizing the page, but this is not 100% reliable and is not a good solution to the problem.  I do not have a working sample as this is being generated by data dynamically loaded from a database.

    If anyone can offer any suggestions why this may happen and offer a potential fix, I would be very grateful.

    Thanks in advance.
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 25 Jun 2009 Link to this post

    Hi Jonathan,
    The only problem that might be the cause for the behavior you describe is the problem of a relatively positioned elements in a scrollable container without position. In short, in case you have ShowIcon=true for the RadColorPickers, you need to apply position to the element that you scroll (the RadPane) as well, in order for the RadColorPickers to scroll as expected. For example:
    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
        .ApplyPosition 
        { 
            position:relative; 
        } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server"/> 
            <telerik:RadSplitter ID="RadSplitter1" runat="server"
                <telerik:RadPane ID="RadPane1" runat="server" CssClass="ApplyPosition"
                    <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker2" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker3" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker4" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker5" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker6" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker7" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker8" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker9" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker10" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker11" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker12" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker13" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker14" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker15" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker16" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker17" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker18" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker19" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                    <telerik:RadColorPicker ID="RadColorPicker20" runat="server" ShowIcon="true"></telerik:RadColorPicker> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 

    In case this does not help you, could you please modify this code so that it demonstrates the problem you have and post it here with detailed information on the result you get with it?

    Best wishes,
    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
Back to Top