Kendo splitter: resizing collapsible icon

Question

The Kendo Splitter has a collapsible property that I want to use. However, the icon is a very small arrow that isn't intuitive at all, the users can barely see it. Even when they know it's there, the icon is so small that clicking it takes some time as hovering such a tiny icon is not that fast.

Splitter

I want to make it bigger. I managed to enlarge the divider itself

.k-splitbar.k-splitbar-horizontal{
    width: 20px; 
}

but not the small icon.

I found this post from a user with the exact same issue as me but the solutions there don't work and the user hasn't given any feedback on them.

You are allowed to override CSS rules. The solution in the other post is the proper way to do it. Your custom rules should be declared in your HTML __after__ Kendo's. You also have the option to use `!important`. — Brett, Dec 10 '14 at 19:39
I have the same issue. Getting the splitter bar bigger is no problem but I am unable to get the icons to render larger. I tried !important but that did not work. — John81, May 05 '15 at 15:33

score 0 · Answer 1 · answered Jul 01 '15 at 20:32

As stated you can ovveride the rules and here is the description of all the rules for a flat theme

.k-splitbar-horizontal .k-resize-handle {
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -330px -573px;
   width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-resize-handle {
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -360px -573px;
   width: 20px; height: 20px;
}

.k-splitbar-horizontal .k-icon.k-expand-prev{
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -389px;
   width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-collapse-prev{
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -454px;
   width: 20px; height: 20px;}

.k-splitbar-horizontal-hover > .k-icon.k-expand-prev{
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -389px;
   width: 20px; height: 20px; 
}
.k-splitbar-horizontal-hover > .k-icon.k-collapse-prev{
   background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -454px; 
   width: 20px; height: 20px; 
}
.k-splitbar.k-splitbar-horizontal{
    width: 15px;}

score 0 · Answer 2 · answered Jul 17 '19 at 11:12

I know 5 years is too late but if someone is struggling with this, here is my solution in SASS.

.k-splitbar{
    .k-i-arrow-60-left, .k-i-arrow-60-right{
        z-index: 100000;
        position: relative;
        background: #ccc;
        border-radius: 0 10px 10px 0;
        bottom: -32px;
        left: 20px;
        width: 34px;
        height: 30px;
        font-size: 30px;
    }
}

This works for horizontal panes, you can follow similar strategy for vertical ones.

Kendo splitter: resizing collapsible icon

2 Answers2