Gagan Garg
Top achievements
Rank 1
Rank 1
Gagan Garg
asked on 05 Jan 2011, 05:19 PM
Hello Telerik Admin,
Please tell me the way how we increase the width of the Select button in Rad Upload control.
Please tell me the way how we increase the width of the Select button in Rad Upload control.
6 Answers, 1 is accepted
0
Cori
Top achievements
Rank 2
Rank 2
answered on 06 Jan 2011, 02:50 PM
Hello Gagan,
Depending on the size that will work for you, you can apply either one of the following two styles to your upload control:
The RadUpload control has about three button sizes. The default one is the smallest, but the sprite includes two others, those are the two I'm using in the above CSS styles. You just need to set the CssClass of the RadUpload control to "largeBrowseButton" or "mediumBrowseButton", depending on which one will fit the text better.
I hope that helps.
Depending on the size that will work for you, you can apply either one of the following two styles to your upload control:
.largeBrowseButton .ruBrowse { background-position-y: -45px !important; height: 24px !important; width: 115px !important; } .mediumBrowseButton .ruBrowse { background-position-y: -22px !important; height: 24px !important; width: 80px !important; }The RadUpload control has about three button sizes. The default one is the smallest, but the sprite includes two others, those are the two I'm using in the above CSS styles. You just need to set the CssClass of the RadUpload control to "largeBrowseButton" or "mediumBrowseButton", depending on which one will fit the text better.
I hope that helps.
0
Tonino
Top achievements
Rank 1
Rank 1
answered on 24 Feb 2012, 10:06 AM
Hi Gagan!
This works with IE, but does not work in Firefox...
Greetings,
Tonino.
This works with IE, but does not work in Firefox...
Greetings,
Tonino.
0
Hi Tonino,
Background-postion-y property is not supported by all browsers. Review the following article.
As a resolution for your issue you can use the following CSS:
Kind regards,
Peter Filipov
the Telerik team
Background-postion-y property is not supported by all browsers. Review the following article.
As a resolution for your issue you can use the following CSS:
.RadUpload .ruBrowse{ background-position: 0 -45px !important; height: 24px !important; width: 115px !important;}Kind regards,
Peter Filipov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Mohammed
Top achievements
Rank 2
Rank 2
answered on 16 Aug 2012, 12:20 AM
Hi,
I used the above CSS and it is working but what if I want the width to be 140px for example.
and I noticed that the mouse over effect is not working anymore if I use the custom class so how can make it works back.
I used the above CSS and it is working but what if I want the width to be 140px for example.
and I noticed that the mouse over effect is not working anymore if I use the custom class so how can make it works back.
0
Hello Zin,
Please review the following markup. I correct the style and now the hover state is enabled.
In case that you want to create bigger button and our sprite image does not support it you should create your own and style the RadUpload accordingly.
Regards,
Peter Filipov
the Telerik team
Please review the following markup. I correct the style and now the hover state is enabled.
<head runat="server"> <title></title> <style type="text/css"> .RadUpload .ruFileWrap .ruBrowse { background-position: 0 -45px; height: 24px; width: 115px; } #RadUpload1 .ruFileWrap .ruButtonHover { background-position: 100% -45px; } </style></head><body> <form id="form1" runat="server"> <div class="foo"> <telerik:RadScriptManager runat="server" ID="RadScriptManager"> </telerik:RadScriptManager> <telerik:RadUpload runat="server" ID="RadUpload1"> </telerik:RadUpload> </div> </form></body>In case that you want to create bigger button and our sprite image does not support it you should create your own and style the RadUpload accordingly.
Regards,
Peter Filipov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Mohammed
Top achievements
Rank 2
Rank 2
answered on 16 Aug 2012, 04:11 PM
Thanks Peter,