Kendo Upload styles

[Bryan Smouse]

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

[Dimiter Topalov]

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