Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ColorPicker > Phantom slider at top:-9999px

Answered Phantom slider at top:-9999px

Feed from this thread
  • Posted on Apr 18, 2011 (permalink)

    I've created a system for importing images, where each image is "processed" during the import process.  This process allows you to resize, crop, flip, rotate, add whitespace, etc.  For the whitespace, I allow the user to select a color (so that the whitespace can be blue, for example).  To do this, I use a RadColorPicker.  (My first time using this control!)

    My problem occurs when I import a lot of images.  (I'm using the multi-file upload control - thank you!)  For each uploaded image, I show a processing panel that allows them to manipulate the image.  If there are a lot of images, there are a lot of panels.  Each panel is probably about 400-500 px high, which can make for a long page.  When it's over 9999 px high, you start seeing these hidden sliders.  In the HTML source, I see the following:

    <div id="Main_gob_CustomForm3_gob_ctl04_BGColorThumb_label" title="Background Color (Current Color is #FFFFFF)" class="rcpIcon">
    <a href="#">Background Color</a><em id="Main_gob_CustomForm3_gob_ctl04_BGColorThumb_icon" style="background-color:#FFFFFF;">(Current Color is #FFFFFF)</em>
    </div><div id="Main_gob_CustomForm3_gob_ctl04_ctl11" class="RadSlider RadSlider_Default" style="position:absolute;top:-9999px;height:22px;width:200px;">

    If you look, you can see there is a slider (class="RadSlider RadSlider_Default" style="position:absolute; top:-9999px ...)

    Is there a way to get rid of this?  Obviously, you're hiding this.  Can't you do a style="display:none;" instead of shoving it up so high?

    I've uploaded a screen snapshot to show this.  Note the slider stuck in the middle.  This is actually related to another color picker that is in a similar window/tile farther down the page - like 9999px farther down.

    Thank you.
    Attached files

    Reply

  • Answer Bozhidar Bozhidar admin's avatar

    Posted on Apr 18, 2011 (permalink)

    Hello,

    I would not recommend to use display: none as I am not sure how it could affect the whole picture. I would suggest to increase the top position from 9999 to 999999, this will ensure, your application will work as expected:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <style type="text/css">
            .RadColorPicker .RadSlider
            {
                top: -999999px !important;
            }
        </style>
        <title></title>
        <link href="Skins/Transparent/ColorPicker.Transparent.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="sm1" runat="server" />
        <telerik:RadColorPicker ID="RadColorPicker4" runat="server" PaletteModes="All" PreviewColor="true"
            ShowEmptyColor="true" ShowRecentColors="true" EnableCustomColor="true" Localization-RecentColors=""
            ShowIcon="true">
        </telerik:RadColorPicker>
        </form>
    </body>
    </html>


    Best wishes,
    Bojo
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

    Reply

  • Posted on Apr 18, 2011 (permalink)

    Thanks

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ColorPicker > Phantom slider at top:-9999px
Related resources for "Phantom slider at top:-9999px"

ASP.NET ColorPicker Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]