This is a migrated thread and some comments may be shown as answers.

Phantom slider at top:-9999px

2 Answers 43 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
LeBear
Top achievements
Rank 1
LeBear asked on 18 Apr 2011, 05:01 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 18 Apr 2011, 08:58 AM
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.

0
LeBear
Top achievements
Rank 1
answered on 18 Apr 2011, 09:08 PM
Thanks
Tags
ColorPicker
Asked by
LeBear
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
LeBear
Top achievements
Rank 1
Share this question
or