5 Answers, 1 is accepted
How did you try to increase the width? The correct way is:
<telerik:RadUpload runat="server" ID="RadUpload1" InputSize="60">
</telerik:RadUpload>
i.e. using the InputSize property of the RadUpload. This should work as expected under FireFox and Safari.
All the best,
Genady Sergeev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
Hi Genady,
I want to change width in the .css
RadControls\Upload\Skins\Default\ RadUpload.css
And I am using following class
.RadUploadInputField
{
width: 460px;
border: solid 1px #cfcfcf;;
background: white;
border-right: 1px;
height: 17px;
line-height: 17px;
_width: 150px;
}
input.RealFileInput
{
position: relative;
width: 558px;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
border: solid 1px;
}
This increases in the width is not reflected in Firefox and safari
I tried this also, but with no result
.RadUploadInputField
{
InputSize:860px;
border: solid 1px #cfcfcf;;
background: white;
border-right: 1px;
height: 17px;
line-height: 17px;
_width: 150px;
}
Thanks & regards,
Sandesh Mahadik.
You cannot style the real file input because:
1) It is invisible
2) CSS styles hardly apply to input file.
What you see actually is a RadTextBox, the correct way to make it grow in width is:
| <style type="text/css"> |
| .RadUpload .ruFakeInput |
| { |
| width:400px; |
| } |
| </style> |
Kind regards,
Genady Sergeev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
I am unable to get what you are trying to say. what is
Do u mean to say that it is not possible to change the position of the invisible button in Firefox and Safari.
By applying the width in input.RealFileInput class, the button select button click is still not working.
input.RealFileInput
{
position: relative;
-moz-opacity: 0;
filter: alpha(opacity: 100);
opacity: 0;
z-index: 2;
border: solid 1px;
width: 850px;
}
Also we have added this
| .RadUpload .ruFakeInput |
| { |
| width:400px; |
| } |
| </style> |
in our existing stylesheet, but its not working...
------------------------------------------------------------------------------------------------------------------------------------------------------------
/* r.a.d.upload default embedded skin skin */
.RadUploadTable
{
background-color: white;
border: solid 0px #e5e5e5;
border-collapse: collapse !important;
/*filter: progid:DXImageTransform.Microsoft.dropShadow(Color=e5e5e5,offX=2,offY=2,positive=true);*/
margin: 5px 0px;
width: 850px;
font: normal 11px Arial, Verdana, Sans-serif;
color: #333;
}
.RadUploadTable
td
{
padding: 0px;
}
.RadUploadButtonArea
{
background: transparent;
}
.RadUploadButton
,
.radUploadButtonMedium
{
background: white url('Img/radUploadBtnMedium.gif') no-repeat;
border: 0px;
height: 22px;
width: 115px;
font : bold 9pt Verdana, Helvetica, sans-serif;
color : #6a737b;
margin-top: 1px;
padding:1px 5px 3px 2px;
height: 24px;
}
.RadUploadButtonDisabled
{
background: white url('Img/radUploadBtnMedium.gif') no-repeat;
border: 0px;
height: 22px;
width: 115px;
font : bold 9pt Verdana, Helvetica, sans-serif;
color : #6a737b;
margin-top: 1px;
padding:1px 5px 3px 2px;
height: 24px;
filter:alpha(opacity=30);
-moz-opacity:0.5;
opacity: 0.5;
}
.RadUploadFileSelector
{
/* checkbox */
}
.RadUploadInputField
{
border: solid 1px #cfcfcf;;
background: white;
border-right: 1px;
height: 17px;
line-height: 17px;
width: 850px;
}
input.RealFileInput
{
position: relative;
-moz-opacity: 0;
filter: alpha(opacity: 100);
opacity: 0;
z-index: 2;
border: solid 1px;
width: 850px;
}
.RadUploadSelectButton
{
border: 0px;
padding-left:12px;
background: transparent url('Img/radUploadBtnMedium.gif') no-repeat;
font : bold 9pt Verdana, Helvetica, sans-serif;
color : #6a737b;
height: 22px;
width: 91px;
}
.RadUploadRemoveButton
{
border: 0px;
background: transparent url(Img/radUploadBtnSmall.gif) no-repeat;
font: normal 11px Arial, Verdana, Sans-serif;
color : #6a737b;
height: 22px;
width: 91px;
float: right;
}
.RadUploadClearButton
{
border: 0px;
background: transparent url('Img/radUploadBtnSmall.gif') no-repeat;
font: bold 11px Arial, Verdana, Sans-serif;
color: #666;
height: 22px;
width: 91px;
float: right;
}
input.NoSkinnedFileUnput
{
border: solid 1px #1f1f1f;
}
.RadUpload .ruFakeInput
{
width:800px;
}
----------------------------------------------------------------------------------------------------------------------------------------------
Can you please elaborate your solution.
Thanks & Regards,
Sandesh M
Which version of the RadUpload are you using? The information that you have entered shows us that you are using 2009.1 402. I have already showed you the two possible solutions for this version. The first one is to use InputSize property and the other is to use .ruFakeInput class.
However, if you are using the classic upload ( as your example CSS shows ), this will not work. The correct way to style the classic upload is:
| <style type="text/css"> |
| .RadUploadTable .RadUploadInputField |
| { |
| background-color:Red; |
| width: 500px; |
| } |
| </style> |
Kind regards,
Genady Sergeev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.