Treeview styling and appearance

2 posts, 0 answers
  1. Joshua Arend
    Joshua Arend avatar
    8 posts
    Member since:
    Apr 2010

    Posted 01 Jun Link to this post

    I've overridden the treeview CSS using the following code and while everything looks fine in desktop Chrome/IE/Firefox I'm having trouble in Chrome on Android.  I'm seeing multiple icons to expand and contract the treeview nodes.  It appears to be displaying a 64px square of the sprite.

     

    <style scoped>
        .k-icon, .k-tool-icon, .k-grouping-dropclue, .k-drop-hint, .k-column-menu .k-sprite {
            background-image: url('/content/kendo/2015.1.429/default/sprite_2x.png');
            border-color: transparent;
        }

        .k-icon {
            width: 32px;
            height: 32px;
        }

        .k-treeview .k-item {
            font-size: 28px;
        }

        .k-treeview .k-minus {
            background-position: 0 -256px;
        }

        .k-treeview .k-plus {
            background-position: 0 -286px;
        }

        .k-treeview .k-in {
            line-height: 32px;
        }

        .k-treeview .k-item, .k-drag-clue {
            font-size: 28px;
            padding: 0 0 0 32px;
        }

        .k-add {
            background-position: -96px -416px;
        }

        .k-insert-middle {
            background-position: -320px -96px;
        }

        .k-denied {
            background-position: -96px -96px;
        }

        .k-insert-bottom {
            background-position: -320px -128px;
        }

        .k-insert-top {
            background-position: -320px -64px;
        }
    </style>

     

    Thoughts

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    135 posts

    Posted 03 Jun Link to this post

    Hello Joshua,

    The problem seems to be caused by the background-size property of the icon. Here is the style rule I added in order to make your case working properly: 

    .k-icon:not(.k-loading) {
        -webkit-background-size: initial;
        background-size: initial;
    }

    Regards,
    Peter Milchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top