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

Reliability of overriding kendo CSS classes

3 Answers 89 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 26 Sep 2019, 04:26 PM

While I've been able to customize the Sass-based themes using variables (https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes#using-variables), there are some customizations I've only been able to do by modifying the Kendo css classes.  For example, to remove the border from the grid pager, I had to override the .k-pager-wrap and .k-link classes:

.k-pager-wrap {
    .k-link {
        border-style: none
    }
}

The alternative is to create custom css classes:

<TelerikGrid Class="custom-class" />

However, I'd need to know the DOM structure to customize the pager element for that grid:

.custom-class {
    .div[data-role="pager"] {
        border-style: none
    }
}

My question is, how reliable is it to customize Kendo css classes or DOM elements?  Are there any guarantees that these css classes will not change and break our application with new Telerik releases?  If this is not a reliable approach, what are your recommendations?

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 27 Sep 2019, 06:29 AM

Hello Ryan,

Such CSS overrides are the way to implement tweaks like that. Inspecting the DOM and the used classes/attributes/roles is the way to create overriding selectors with sufficient specificity.

We try to change the HTML structure and the classes used as rarely as possible. The main types of classes (such as k-link, k-pager-wrap) are not something that is likely to change at all.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
Zhi Yuan
Top achievements
Rank 1
Veteran
answered on 15 Jan 2021, 04:36 AM

Hello Marin,

Can I know which is the preferred way of overriding CSS classes? I understand that in the upcoming release, all components will have a Class parameter. However, if overriding existing CSS classes gets the job done, in what scenarios then should we create custom classes?

Thank you!

0
Marin Bratanov
Telerik team
answered on 15 Jan 2021, 08:14 AM

Hi Zhi Yuan, 

Setting your own Class to a component makes sense when you want to target specific instances in your selectors - then you can cascade them through that class. If you only use classes that come in our rendering, you will target all instances of these selectors.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Ryan
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Zhi Yuan
Top achievements
Rank 1
Veteran
Share this question
or