AsychUpload ProgressBar Style

2 posts, 0 answers
  1. Brian
    Brian avatar
    68 posts
    Member since:
    Jun 2011

    Posted 06 Mar 2013 Link to this post

    I have an AsyncUpload on my page. I browse my page, click [Select], choose one or more files to upload, and click [Open]. At that point, each selected file appears within AsyncUpload, and each file displays its own individual progressbar. This, of course, is the default behavior of AsyncUpload.
    The progressbar that appears for each file looks like it has a height of 1 or 2px. I would like to increase the height of the progressbar that appears.
    I've added a style.css and I am using this to control some of the AsyncUpload format. For example, the following will cause each selected file name to appear with blue text:

    .RadAsyncUpload { color:Blue; }

    To try to change the height of the progressbar, I added the following to my CSS:

    .RadAsyncUpload .ruProgress .ruBar { height:10px; }

    I have tried several variations of this, but have been unsuccessful at changing the bar's height. How do I change the height of the progressbar?
    Thank you
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Mar 2013 Link to this post

    Hello Brian,

    One suggestion is like If you want to customize the upload progress completely, you can use the RadProgressArea and integrate it with the RadAsyncUpload. The main advantage of using RadProgressArea is the easier customization with the help of its built-in skins and templates.

    Please have a look at the following mark-up.

    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <div class="qsf-demo-canvas">
        <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic"
            EnableInlineProgress="false" />
        <br />
        <telerik:RadProgressManager runat="server" ID="RadProgressManager1" />
        <telerik:RadProgressArea runat="server" ID="RadProgressArea1" />
        <div id="exFileList" class="file-list">
            <strong>Uploaded file(s) in the target folder:</strong>

    <style type="text/css">
        .qsf-demo-canvas .file-list
            margin: 20px 0 0 0;
            display: none;
        .qsf-demo-canvas .file-list ul
            margin: 10px 0 0 0;
            padding: 0;
            list-style: none;
        .qsf-demo-canvas .file-list li
            margin: 10px 0 0 0;

    Hope this helps,
Back to Top