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

Phantom slider at top:-9999px

2 Answers 74 Views

ColorPicker

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

LeBear asked on 18 Apr 2011, 05:01 AM

PhantomSlider.jpg

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

Accepted

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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.