Splitter Arrow Style nad divider width

3 posts, 0 answers
  1. Deepak
    Deepak avatar
    5 posts
    Member since:
    Dec 2011

    Posted 01 Oct 2013 Link to this post

    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. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 02 Oct 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Will
    Will avatar
    34 posts
    Member since:
    Oct 2013

    Posted 28 May 2014 Link to this post

    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;}
Back to Top