Did a search, but could not find a related post. I have this issue in ie9 and Firefox 8, have not tried other browsers.
When the RadUpload generates its HTML/JavaScript it has an invisible 'floating' input that when clicked opens the file browser dialog. This input is, by default, floating at a relative position of -5000px above where the control is actually located. Most of the time, bumping it 5000 pixels pushes it off the page, the problem is that on longer pages this can overlap with other visible controls/inputs and can cause unexpected behavior since clicking on this floating input will still bring up the file dialog for that RadUpload.
In my case, I have a RadGrid with a template that contains RadUploads which are actually overlapping on each other, essentially making it impossible to click the intended upload.
I've create a sample page to illustrate this issue shown below. This repeats 50 upload controls with some spacing between them. Once on the page you can see that clicking around the 'Weirdness here' text will open up a file dialog. This becomes an issue when this phantom input overlaps another control. You can verify in the html that the input is floating. When hovered over, the input snaps to the correct location, but will return to -5000px immediately after.
Markup:
Code behind:
Generated Html:
When the RadUpload generates its HTML/JavaScript it has an invisible 'floating' input that when clicked opens the file browser dialog. This input is, by default, floating at a relative position of -5000px above where the control is actually located. Most of the time, bumping it 5000 pixels pushes it off the page, the problem is that on longer pages this can overlap with other visible controls/inputs and can cause unexpected behavior since clicking on this floating input will still bring up the file dialog for that RadUpload.
In my case, I have a RadGrid with a template that contains RadUploads which are actually overlapping on each other, essentially making it impossible to click the intended upload.
I've create a sample page to illustrate this issue shown below. This repeats 50 upload controls with some spacing between them. Once on the page you can see that clicking around the 'Weirdness here' text will open up a file dialog. This becomes an issue when this phantom input overlaps another control. You can verify in the html that the input is floating. When hovered over, the input snaps to the correct location, but will return to -5000px immediately after.
Markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DeleteMe.aspx.cs" Inherits="AuctionAdmin.DeleteMe" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!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"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
></
asp:ScriptManager
>
<
div
>
<
asp:Repeater
runat
=
"server"
ID
=
"rptTest"
>
<
ItemTemplate
>
<%# Container.DataItem.ToString() /*Index number*/ %>
<
telerik:RadUpload
runat
=
"server"
ID
=
"uploadTest"
ControlObjectsVisibility
=
"ClearButtons"
></
telerik:RadUpload
>
Wierdness Here
<
br
/><
br
/><
br
/>
</
ItemTemplate
>
</
asp:Repeater
>
</
div
>
</
form
>
</
body
>
</
html
>
Code behind:
public
partial
class
DeleteMe : System.Web.UI.Page
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
List<
int
> list =
new
List<
int
>();
for
(
int
i=0; i<100; i++) list.Add(i);
rptTest.DataSource = list;
rptTest.DataBind();
}
}
Generated Html:
<
div
id
=
"rptTest_ctl47_uploadTest"
class
=
"RadUpload RadUpload_Default"
>
<
input
id
=
"rptTest_ctl47_uploadTest_ClientState"
type
=
"hidden"
name
=
"rptTest_ctl47_uploadTest_ClientState"
autocomplete
=
"off"
>
<
ul
id
=
"rptTest_ctl47_uploadTestListContainer"
class
=
"ruInputs"
>
<
li
>
<
span
class
=
"ruFileWrap ruStyled"
>
<
input
id
=
"rptTest_ctl47_uploadTestfile0"
class
=
"ruFileInput"
type
=
"file"
name
=
"rptTest_ctl47_uploadTestfile0"
size
=
"23"
style
=
"position: absolute; left: 0px; top: -5000px;"
title
=
"Desert.jpg"
alt
=
"Desert.jpg"
>
<
input
class
=
"ruFakeInput"
type
=
"text"
size
=
"22"
title
=
"Desert.jpg"
>
<
input
class
=
"ruButton ruBrowse"
type
=
"button"
value
=
"Select"
>
</
span
>
<
input
id
=
"rptTest_ctl47_uploadTestclear0"
class
=
"ruButton ruClear"
type
=
"button"
value
=
"Clear"
name
=
"ClearInput"
>
</
li
>
</
ul
>
</
div
>