Reliability of overriding kendo CSS classes

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    7 posts
    Member since:
    Aug 2019

    Posted 26 Sep Link to this post

    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?

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4899 posts

    Posted 27 Sep Link to this post

    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
Back to Top