Icon for radasync button

1 Answer 28 Views
AsyncUpload Button
Pranay
Top achievements
Rank 1
Pranay asked on 26 May 2021, 03:25 PM

Hi

I am trying to add font icon to radasyncupload but it does not align well. Text and icon are not at same height as shown below.

As shown above,

the "Download Template" is a radbutton control with markup as   <telerik:RadButton runat="server" ID="rbDownloadTemplate" Text="Download Template"
                    k" RenderMode="Lightweight">
                    <Icon PrimaryIconCssClass="rbDownload"></Icon>
                </telerik:RadButton>

the "Upload data" is a radasyncupload control with markup as    <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="rauUploadFile" ClientIDMode="Static"
                    MaxFileInputsCount="1" MultipleFileSelection="Disabled" DropZones=".DropZone1"
                    AllowedFileExtensions="xls,xlsx,csv"
                    OnFileUploaded="rauUploadFile_FileUploaded"
                    OnClientFileUploaded="rauUploadFile_OnClientFileUploaded"
                    OnClientValidationFailed="rauGeneric_OnClientValidationFailed" HideFileInput="true" CssClass="uploadButton" AriaSettings-Label="lbl">
                    <Localization Select="Upload data" />
                    <FileFilters>
                        <telerik:FileFilter Extensions="xls,xlsx,csv" />
                    </FileFilters>
                </telerik:RadAsyncUpload>

and my custom css to hide upload input and other settings

.ruBrowse::before {
    content: "\e133" !important;
    font: 16px/1 "WebComponentsIcons" !important;
}

.uploadButton {
    display: inline !important;
    position: relative !important;
}

    .uploadButton ul {
        display: inline !important;
    }

div.RadUpload .ruFakeInput {
    visibility: hidden !important;
    width: 0px !important;
    padding: 0px !important;
}

Can you please help in adding the font icon to asyncupload and look same as radbutton font icon

 

Thank you.


1 Answer, 1 is accepted

Sort by
1
Accepted
Attila Antal
Telerik team
answered on 31 May 2021, 02:55 PM

Hello Pranay,

Since the RadButton supports icons, it has its own styles to align them. If you look carefully, you will notice that it has a vertical-align value of -2px to make the icon aligned with the Text.

 

Applying that to the RadAsyncUpload button will align it.

.ruBrowse::before {
    content: "\e133" !important;
    font: 16px/1 "WebComponentsIcons" !important;
    vertical-align: -2px;
}

.RadButton,
.RadAsyncUpload {
    display: inline-block;
}

 

You can learn more about styling in the following articles:

To narrow down the issue, I would suggest inspecting the HTML elements and the styles applied to them. You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

 

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Pranay
Top achievements
Rank 1
commented on 02 Jun 2021, 12:43 PM

Thank you Attila!! It worked like a charm :-)
Tags
AsyncUpload Button
Asked by
Pranay
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or