1. Kjell
    Kjell avatar
    225 posts
    Member since:
    May 2011

    Posted 18 Dec 2020 Link to this post

    How remove bottom border in Material skin? Or set all borders in RadDropDownTree using Material skin?

    And how set RadDropDownTree Height (the combobox...)?

  2. Doncho
    Admin
    Doncho avatar
    119 posts

    Posted 23 Dec 2020 Link to this post

    Hello,

    In general, Telerik Controls render HTML structures and apply some built-in stylesheets to achieve a certain appearance. If you would like to further customize that appearance, you will need to override the built-in styles. 

    To do that, apply 'strong' enough selectors to override the built-in ones. Check out the following articles for more information:

    For instance here is a sample CSS targeting RadDropDownTree in Material Skin. Setting the height of the dropdown element and removing its bottom border:

    .RadDropDownTree.RadDropDownTree_Material .rddtInner{
        height:100px;
    }
    .RadDropDownTree.RadDropDownTree_Material .rddtInner:before{
        border-bottom:none;
    }

    To sum up, every style can be overridden, if you know what you want to style. For tips and tricks in finding that, you can take a look at the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

    To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

    I hope this will help.

    Kind regards,
    Doncho
    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/.

Back to Top