ProgressBarArea - Overriding Styles

[Developer]

Hi,

I have a progress bar area on my page, I'm trying to remove ther header.  Have read that this could be done with the following style changes:

 

<style type="text/css">
RadProgressArea .ruProgress
{
    padding:15px 0 0 !important;
}
RadProgressArea_Windows7 .ruProgress
{
    background-image: none !important;
}
</style>

However this makes no difference - am I missing something?
​

[Magdalena]

Hello,

Please, try to apply the following CSS to remove the header of the radProgressArea

.RadUploadProgressArea .ruProgressHeader {
    display: none;
}

html .RadUploadProgressArea .ruProgress {
    padding-top: 20px;
}

We are also sending this video of the behavior after applying the styles for your reference.

Regards,
Magdalena
Telerik

 

 

[Developer]

Hi,

Thanks that work well.  Is there any way to remove the bottom white space and also the external border, so litterally all that is rendered is the progress bar itself?

Thanks again.

[Magdalena]

Hello,

The border (and shadows) can be removed by the following CSS

html .RadUploadProgressArea .ruProgress {
    border: 0;
}

html .RadUploadProgressArea .ruShadow .ruProgress {
    box-shadow: none;
}

The bottom space under the time speed information can be removed by the following

html .RadUploadProgressArea .ruTimeSpeed {
    margin-bottom: 0;
}

Regards,
Magdalena
Telerik