AsychUpload ProgressBar Style

[Brian]

Hello,

 

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

[Princy]

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.

ASPX:

<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>
    </div>
</div>

CSS:

<style type="text/css">
    .qsf-demo-canvas
    {
    }
    .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;
    }
</style>

Hope this helps,
Princy.