while page loading, "RadAsyncUpload " control not rendering properly for millisecond.

3 posts, 0 answers
  1. anup
    anup avatar
    3 posts
    Member since:
    Mar 2019

    Posted 06 Mar Link to this post

    while page loading, "RadAsyncUpload " control not rendering properly for millisecond. it is not applying metrotouch css to file upload contorl for millisecond.
    following are the code information
         <telerik:RadAsyncUpload ID="MyFile1" runat="server" MultipleFileSelection="Disabled" Skin="MetroTouch" EnableViewState="true" MaxFileInputsCount="1" 
                                    PostbackTriggers="rdbAccreditationCertificateYes,rdbAccreditationCertificateNo,rdbFirewallYes,rdbFirewallNo,rdbIRSYes,rdbIRSNo,rdbYes,rdbNo,Lnkproceed,LnkAddRow,lnkDelete,btnRemove,lnkBack,LnkSaveContinue">
                                    <Localization Select="Browse" />
                                </telerik:RadAsyncUpload>

    Please refer attached file
  2. Peter Milchev
    Admin
    Peter Milchev avatar
    532 posts

    Posted 11 Mar Link to this post

    Hello Anup,

    The behavior you are observing is called Flash of unstyled content and this is a common scenario especially when the styles are loaded externally and the internet connection is slow.

    There are many approaches to deal with this and they depend on the given scenario and requirements of the project. For example, here are a few approaches you can try: 

    The last approach is not recommended as this might affect some controls that need their parent to be visible initially so that they can correctly calculate its size. 

    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. anup
    anup avatar
    3 posts
    Member since:
    Mar 2019

    Posted 13 Mar Link to this post

    I have resolved this issue by applying css on page. Insted of Telerick css file.

    add following css on page

     .RadUpload .ruStyled .ruFileInput {
    opacity: 0!important;
    }
        .ruDropZone {
            padding: 10px;
            width: 100%;
            height: 100%;
            border: 1px solid;
            border-radius: 3px;
            font-size: 18px;
            text-align: center;
            display: none;
            position: absolute;
            left: -11px;
            top: -11px;
            z-index: 2000;
        }

        .RadUpload_MetroTouch .ruFakeInput {
        padding: 0!important;
        height: 34px!important;
        border: 1px solid #e6e6e6!important;
        color: #333;
        font: 100 16px "Segoe UI",Arial,Helvetica,sans-serif;
        line-height: 34px;
        vertical-align: top;
    }
            .RadUpload .ruFakeInput {
        
        margin-right: 4px;
        background-position: 0 -93px;
        background-repeat: repeat-x;
        background-color: #fff;
      
    }
        .RadUpload .ruFakeInput, .RadUpload .ruButton {
        border-radius: 0;
        -webkit-appearance: none;
    }
        .RadUpload .ruFileInput, .RadUpload .ruFakeInput, .RadUpload .ruButton {
        float: none;
        
    }
        .RadUpload .ruStyled .ruFileInput, .RadUpload .ruFakeInput {
     
        box-sizing: content-box;
    }


        .RadUpload_MetroTouch .ruButton {
        margin: 0 2px 0 0;
        padding: 0;
        width: 80px;
        height: 36px;
        border: 1px solid #e6e6e6;
        color: #333;
        background-color: #f9f9f9;
        font: 100 16px "Segoe UI",Arial,Helvetica,sans-serif;
        line-height: 34px;
    }

        .RadUpload .ruBrowse {  
        background-position: 0 0;
    }
        .RadUpload .ruButton {
       
        text-align: center;
    }
        .RadUpload .ruFakeInput, .RadUpload .ruButton {
        border-radius: 0;
        -webkit-appearance: none;
    }

        .RadUpload .ruFileInput, .RadUpload .ruFakeInput, .RadUpload .ruButton {
        float: none;
        vertical-align: top;
    }
        button, html input[type="button"], input[type="reset"], input[type="submit"] {
     
        cursor: pointer;
    }

     

     

Back to Top