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

How to increase the size of the button and textbox of the RadAsynUpload control?

1 Answer 649 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
ThirstyMind
Top achievements
Rank 1
ThirstyMind asked on 21 Feb 2015, 05:51 AM
Hi,

I am using the RadAsyncUpload control on an asp.net ajax C# web page. I want to customize the look and feel of the control. How could I increase the size of the "Select" button and the textbox. I tried to do it by setting the height and width of the control, but it didn't have any effect on the button or the textbox size!

<telerik:RadAsyncUpload ID="radAsynFileUploader" runat="server" Skin="Windows7"
AllowedFileExtensions=".pdf, .doc, .docx, .txt, .zip"
EnableTheming="true"
HideFileInput="false" Width="400px" Height="200px" >
</telerik:RadAsyncUpload>

Since the page contains a couple of Bootstarp 3 buttons, I want the button from this control also to be of the same size as the Bootstrap buttons. Also, the font of the displayed file name and "Remove" link after a file is selected are too tiny and want to increase their size also.

Thanks

1 Answer, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 24 Feb 2015, 09:11 AM
Hello,

As we added a new Bootstrap skin in the last beta release, you can try to apply that skin to the control.

As the RadAsyncUpload in classic render is supported also in IE7, the "Select" button is rendered by image because of gradient and border radius. For this reason we recommend you to set lightweightrender mode to the control which will give you more opportunities for a customization. As the RadAsyncUpload in lightweight render mode is elastic, you can increase the size of the control simply by setting different font-size:
html .RadUpload {
    font-size: 18px;
}

You can also increase sizes of the input and the button by the following:

aspx:
<telerik:RadAsyncUpload ID="radAsynFileUploader" runat="server" RenderMode="Lightweight">


CSS:
html .RadUpload .ruFakeInput {
    width: 200px;
    height: 26px;
}
html .RadUpload .ruBrowse {
    width: 100px;
    height: 24px;
    line-height: 24px;
}


Regards,
Magdalena
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
AsyncUpload
Asked by
ThirstyMind
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Share this question
or