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

Async Upload button increase size and change color

1 Answer 83 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Jagat
Top achievements
Rank 1
Jagat asked on 07 Mar 2019, 05:05 PM

Hello,

 

I am having trouble in increasing the size of the button. I did change the height and color options in the css file but it does nto change. I attached a image to this email which shows the button. How can i increase the size of this button?

 

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" AllowedFileExtensions="pdf,jpg,jpeg,txt"
                                       MultipleFileSelection="Automatic"  CssClass="wizInternalLabels" dir="rtl"
                                       PostbackTriggers="btnCustomFinish"  >
                                       <Localization Select=" Select a document to upload "   />
                                        
                                   </telerik:RadAsyncUpload>

 

.ruButton.ruBrowse
{
min-width:500px;
font-size:18px;
    color:Red;
font-weight:bold;
height:100px;
}

 

.wizInternalLabels
{
color:#00008B;
font-size:x-large;
height:200px;
}

 

 

Thanks in Advance

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 12 Mar 2019, 10:03 AM
Hello Jagat,

Firstly, I would suggest using the Lightweight RenderMode of the AsyncUpload. 

Then, the styles you have provided would increase the button size. 

The color is not applied because the default selector is "stronger", more specific than the one you use t set the button's color. 

Generally, for further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post. 

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: 


In your case, the following improvement would be enough:

<style>
    html div.RadAsyncUpload .ruButton.ruBrowse {
        min-width: 500px;
        font-size: 18px;
        color: Red;
        font-weight: bold;
        height: 100px;
    }
 
    html div.RadAsyncUpload.wizInternalLabels {
        color: #00008B;
        font-size: x-large;
        height: 200px;
    }
</style>


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.
Tags
AsyncUpload
Asked by
Jagat
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or