How To Use Custom Collapse/Expand Buttons in RadSplitter

RELATED TO:

AUTHOR: Veselina Raykova

DATE POSTED: June 19, 2018

HOW TO

This article provides two possible approaches for modifying the default collapse/expand buttons of the split bars in RadSplitter. You can choose between using custom image buttons, or enlarging the default font icon arrows, along with increasing the width of the Splitbar and the corresponding html elements.


SOLUTION 1: Use custom expand/collapse icons

Set the desired Splitbar width through the Splitter's SplitBarsSize property and pass the path to the desired custom icons to the collapse/expand button elements (you will also need to modify the default dimensions of the buttons):

solution1

<telerik:RadSplitter ID="RadSplitter1" runat="server" SplitBarsSize="20">
    ...
</telerik:RadSplitter>
/*Vertical Splitbars*/
.rspCollapseBarExpand, .rspCollapseBarExpandOver,
.rspCollapseBarCollapse, .rspCollapseBarCollapseOver{
    height: 45px !important; /*the height of your button-image */
    line-height: 45px !important; /*the height of your button-image */
    width: 20px !important;
    background-position: 0 !important;
}
.rspCollapseBarExpand{
    background-image: url("./icons/btn-right.png") !important;
}
.rspCollapseBarExpandOver{
    background-image: url("./icons/btn-right-hover.png") !important;
}
.rspCollapseBarCollapse{
    background-image: url("./icons/btn-left.png") !important;
}
.rspCollapseBarCollapseOver{
    background-image: url("./icons/btn-left-hover.png") !important;
}
 
/*Horizontal Splitbars*/
.rspCollapseBarHorizontalExpand, .rspCollapseBarHorizontalExpandOver,
.rspCollapseBarHorizontalCollapse, .rspCollapseBarHorizontalCollapseOver{
    height: 20px !important; /*the height of your button-image */
    line-height: 20px !important; /*the height of your button-image */
    width: 45px !important;
    background-position: 0 !important;
}
.rspCollapseBarHorizontalExpand{
    background-image: url("./icons/btn-down.png") !important;
}
.rspCollapseBarHorizontalExpandOver{
    background-image: url("./icons/btn-down-hover.png") !important;
}
.rspCollapseBarHorizontalCollapse{
    background-image: url("./icons/btn-up.png") !important;
}
.rspCollapseBarHorizontalCollapseOver{
    background-image: url("./icons/btn-up-hover.png") !important;
}

 

SOLUTION 2: Enlarge the default collapse/expand icons

Set the desired Splitbar width through the Splitter's SplitBarsSize property and overwrite the following styles in order to enlarge the default font-size of the expand/collapse buttons:
Solution 2

<telerik:RadSplitter ID="RadSplitter1" runat="server" SplitBarsSize="20">
    ...
</telerik:RadSplitter>
/*Vertical Splitbars*/
.rspCollapseBarExpand, .rspCollapseBarExpandOver,
.rspCollapseBarCollapse, .rspCollapseBarCollapseOver{
    height: 45px !important; /*the height of your button-image */
    line-height: 45px !important; /*the height of your button-image */
    width: 20px !important;
    background-position: 0 !important;
}
.RadSplitter .rspCollapseBarExpand:before,
.RadSplitter .rspCollapseBarCollapse:before {
    font-size: 24px !important;
    width: 20px !important;
}
 
/*Horizontal Splitbars*/
.rspCollapseBarHorizontalExpand, .rspCollapseBarHorizontalExpandOver,
.rspCollapseBarHorizontalCollapse, .rspCollapseBarHorizontalCollapseOver{
    height: 20px !important; /*the height of your button-image */
    line-height: 20px !important; /*the height of your button-image */
    width: 45px !important;
    background-position: 0 !important;
}
.RadSplitter .rspCollapseBarHorizontalExpand:before,
.RadSplitter .rspCollapseBarHorizontalCollapse:before {
    font-size: 24px !important;
    width: 20px !important;
}

 

SEE ALSO

Files

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.