Incorrect palette display postion

5 posts, 1 answers
  1. Vlatko
    Vlatko avatar
    5 posts
    Member since:
    Dec 2008

    Posted 16 Jan 2009 Link to this post

    Hi,

    I have problem with color picker inside radgrid edit popup. I'm using icon, and when popup is displayed I center it on client side. If I click on icon palette is displayed fine over popup, but its position is way off icon. Instead of being displayed just below icon it appears way below and to the right of the icon. Only way I get correct position of pallete is if I fix popup position to top left corner of screen. Is there a way to fix this behavior?

    Also there is another, maybe related problem. If i have to scroll content inside popup icon doesn't scroll with content, it's like static element. I tried as you suggested here on the forum to put on parent element position: relative, in my case to the cell holding control, but that didn't help.
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 19 Jan 2009 Link to this post

    Hello Vlatko,
    I am not quite sure what you mean by saying that you center the RadColorPicker on the client. In case you calculate the position and apply it to the palette of the RadColorPicker and that position is not the one you expect, perhaps there is a problem in your calculations. Please note that when you apply position to an element, it is relative to the first positioned parent of the element. In case you send me a simple test page, demonstrating how your code works, perhaps I can explain the result you get and point you in the right direction.

    As for your second question - yes you are correct, you have to apply "position:relative;" to the element that you scroll. I tested it and the color picker scrolled with the rest of the content - please find my test page attached. Could you please send me a test page, demonstrating your setup, so that I can research what is causing the problem?

    Regards,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vlatko
    Vlatko avatar
    5 posts
    Member since:
    Dec 2008

    Posted 19 Jan 2009 Link to this post

    Hi,

    Sorry if I haven't been clear about my problem. I was centering popup window, not color picker, and problem is that if popup is not displayed on top=0px, left=0px clicking on color icon will display palette way off icon. I can get same results with sample you have sent, just make popup bigger, I've tried height=400px and width=400px, and when icon is clicked palette is not displayed below icon. I forgot to mention that I'm using 2008.1.625.20 version of dll, and I can't change the version, so this might have been fixed in newer versions, but unfortunately I can't just use newer version.

    As for scroll problem, I was able to fix it with a solution you've attached.
  5. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 20 Jan 2009 Link to this post

    Hi Vlatko,
    I was able to prepare a workaround for the version you use. The main idea behind it, is to attach the palette of the color picker to the BODY element, so that the position is correct. Have a look at the following code fragment:

    <body> 
        <div id="palettesContainer" class="radcolorpicker RadColorPicker_Default"
        </div> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
            <script type="text/javascript"
            function OnPopUpShowing(sender, args) 
            { 
               var popupElement = args.get_popUp(); 
               var contentWrapper = popupElement.getElementsByTagName("div")[4]; 
               contentWrapper.style.position = 'relative'
            } 
             
            function OnClientLoaded(sender, args) 
            { 
                var palette = sender.getPaletteContainer(); 
                palette.parentNode.removeChild(palette); 
                $get('palettesContainer').appendChild(palette); 
            } 
            </script> 

    <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true"  
    OnClientLoaded="OnClientLoaded"
    </telerik:RadColorPicker> 

    Please note that the DIV element where I move the palette, should have as "class" the CSS class of the wrapper element of the RadColorPicker, so that the palette has the correct styles applied.

    Greetings,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Vlatko
    Vlatko avatar
    5 posts
    Member since:
    Dec 2008

    Posted 21 Jan 2009 Link to this post

    Hi,

    Thanks for the workaround.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017