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.

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.

Answer 1

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.

Answer 2

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;}