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

Overriding kendo CSS classes problem

2 Answers 655 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Hadas
Top achievements
Rank 1
Hadas asked on 07 Oct 2018, 05:15 AM

Hi,

I am trying to override a Kendo CSS class like in this example, only for a single angular component, but it doesnt work. 

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

styles: [`
kendo-upload .k-dropzone-hint {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
`],

Only when I override the classes in a general CSS file in my project, it works.

Any idea what can be the problem?

 

Thanks in advance

2 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 09 Oct 2018, 07:55 AM
Hello Hadas,

Since the example disables Angular's ViewEncapsulation, the styles are applied to all components on the page. This is necessary in order to apply styles to an internal part of the upload component. To style a specific component, apply the styles through a CSS class or ID selector, like shown in the updated example.

Regards,
Alex Gyoshev
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.
0
Hadas
Top achievements
Rank 1
answered on 09 Oct 2018, 08:49 AM

That helped!

Thanks

Tags
General Discussions
Asked by
Hadas
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Hadas
Top achievements
Rank 1
Share this question
or