Treeview styling and appearance

[Joshua Arend]

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

[Peter Milchev]

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