This is a migrated thread and some comments may be shown as answers.

Splitter Arrow Style nad divider width

2 Answers 385 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Deepak
Top achievements
Rank 1
Deepak asked on 01 Oct 2013, 09:07 PM
Hi,

Is it possible to change the style of splitter arrow like make it bigger, more intuitive? Also, how to increase the width of the divider between the panes. wanted to make it more wider.

Thanks,
Deepak

2 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 02 Oct 2013, 09:03 AM
Hello Deepak,

Basically the icon is part of a sprite and in order to change it you should override the default one. For example: 

.k-splitbar .k-icon.k-collapse-prev{
   background: url('//...');  /*specify the icon url*/
   width: 15px/*specify the icon width */
   height: 15px/*specify the icon height */
}
Dividers' widths can be increased using the following CSS rules: 
<style>
.k-splitbar.k-splitbar-horizontal{
    width: 20px; /*specify the width of the horizontal splitbar*/
}
                 
.k-splitbar-vertical{
    height: 20px; /*specify the height of the vertical splitbar*/
}
</style>

Regards,

Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Will
Top achievements
Rank 1
answered on 28 May 2014, 02:25 PM
Just to expand on Iliana's response to save anyone else coming here a bit of time.  This is obviously targeting the 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;}
Tags
Splitter
Asked by
Deepak
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Will
Top achievements
Rank 1
Share this question
or