This is a migrated thread and some comments may be shown as answers.

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

2 Answers 156 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
anup
Top achievements
Rank 1
anup asked on 06 Mar 2019, 03:00 PM
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 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 11 Mar 2019, 09:47 AM
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.
0
anup
Top achievements
Rank 1
answered on 13 Mar 2019, 10:04 AM

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;
}

 

 

Tags
AsyncUpload
Asked by
anup
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
anup
Top achievements
Rank 1
Share this question
or