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

Kendo Upload styles

1 Answer 78 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Bryan Smouse
Top achievements
Rank 1
Bryan Smouse asked on 30 Oct 2018, 04:26 PM
I’m unable to apply CSS styles to any element within the kendo-upload element. Let’s use k-upload-button as an example. I’ve tried the following selectors without success:

. k-upload-button
. k-button .k-upload-button
. k-upload > .k-dropzone > .k-upload-button

Looking in Chrome’s debugging tool, it doesn’t appear that the style is being overridden, but instead the selector isn’t selecting the element. How would one go about styling the individual elements within the kendo-upload element?

Although certainly not ideal, I am able to style them using JavaScript within Angular’s ngAfterViewInit function:

    ngAfterViewInit() {
        let kendoUploadButton = document.querySelector('.k-upload-button');
        kendoUploadButton.setAttribute('style', 'display:none');
    }

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 01 Nov 2018, 07:03 AM
Hello Bryan,

To overwrite the built-in Kendo UI styling, coming from the theme, you will need both selectors with enough specificity, and to make sure that the default Angular encapsulation is "penetrated" - the custom styles should be either provided globally after the theme is loaded, or if they are provided on a component level, the ViewEncapsulation should be set to None, e.g.:

encapsulation: ViewEncapsulation.None,
  styles: [`
    .k-upload .k-dropzone {
      border: 1px solid red;
      height: 50px;
    }
    .k-upload .k-dropzone .k-upload-button {
      display: none;
    }
  `]

https://stackblitz.com/edit/angular-z15fko?file=app/upload.component.ts

Querying and manipulating the DOM directly is indeed not recommended and should be avoided when possible.

I hope this helps.

Regards,
Dimiter Topalov
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
General Discussions
Asked by
Bryan Smouse
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or