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

Add an image to the CloudUpload button

2 Answers 151 Views
CloudUpload
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 14 Apr 2017, 05:50 PM

I'd like to add an image to the RadCloudUpload button so it matches other buttons - how can I do that? In the attached image the top button is a normal RadButton with image - below that is the RadCloudUpload to which I'd like to add an image or icon.

Thanks.

2 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 19 Apr 2017, 08:02 AM
Hello Greg,

We are afraid that the cloud upload has not implement such functionality. You can achieve the described behavior by an additional custom CSS as the following:
span.rcuFileWrap.rcuButton:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: -12px;
    margin-right: 4px;
    content: "\e801";
    font: 16px/1 "WebComponentsIcons";
}


Here you can find the full list of our font-icons. Inspecting an icon in a browser developer tool you can find its code for the content CSS property. We are sending you this screen shot for your reference. You can use for the purpose also your custom font, or a sprite image.

Do not hesitate to contact us if you have other questions.


Regards,
Magdalena
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Greg
Top achievements
Rank 1
answered on 24 Apr 2017, 04:43 PM

Here is how I successfully added the image to the CloudUpload (with help from a support ticket):

Add the CssClass customIconButton to the CloudUpload referencing the style below:

 

  <style type="text/css">
 
    .RadCloudUpload.customIconButton .rcuButtonText
    {
        /*add image*/
        background-image: url('images/png16/up.png');
        background-repeat: no-repeat;
        /*prevent text and image overlap*/
        padding-left: 20px;
        background-position: 0px 4px;
    }
    .RadCloudUpload.customIconButton .rcuButton
    {
        /*adjust the space on the left*/
        padding-left: 10px;
    }
</style>

You can see the CloudUpload to the right of a regular RadButton in the attached image.

 

Tags
CloudUpload
Asked by
Greg
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Greg
Top achievements
Rank 1
Share this question
or