Phantom slider at top:-9999px

3 posts, 1 answers
  1. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 18 Apr 2011 Link to this post

    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.
  2. Answer
    Bozhidar avatar
    693 posts

    Posted 18 Apr 2011 Link to this post


    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" "">
    <head runat="server">
        <style type="text/css">
            .RadColorPicker .RadSlider
                top: -999999px !important;
        <link href="Skins/Transparent/ColorPicker.Transparent.css" rel="stylesheet" type="text/css" />
        <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=""

    Best wishes,
    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.

  3. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 18 Apr 2011 Link to this post

Back to Top