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

2 posts, 0 answers
  1. ThirstyMind
    ThirstyMind avatar
    3 posts
    Member since:
    Jan 2011

    Posted 20 Feb 2015 Link to this post

    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
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 24 Feb 2015 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top