ProgressBarArea - Overriding Styles

4 posts, 0 answers
  1. Developer
    Developer avatar
    38 posts
    Member since:
    Apr 2014

    Posted 03 Oct 2014 Link to this post

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

    Posted 06 Oct 2014 Link to this post

    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
     

    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
  4. Developer
    Developer avatar
    38 posts
    Member since:
    Apr 2014

    Posted 07 Oct 2014 Link to this post

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

    Posted 08 Oct 2014 Link to this post

    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
     

    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.

     
Back to Top