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

Telerik is a recommandable product....

1 Answer 31 Views

Splitter

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

raaj asked on 27 May 2010, 08:05 AM

expand.JPG

Team

I'm admiring your support given for me(and others) so far.

My company runs with Telerik components since Version 2009.

Since we are implementing your controls one by one in our product, we are stuck with somewhere else.

Right now we are implementing your splitter control in our application.

Our client want the splitter Button should be somewhat bigger (ie. easily catchable). is it Possible?

Pls. provide me your suggestion.

Thanks
Rajesh N.

1 Answer, 1 is accepted

answered on 27 May 2010, 03:21 PM

splitter.gif

biggersplitterbutton.zip

Hi Rajesh,

In order to have a bigger splitter button, you should follow the steps bellow:

Create a new sprite with horizontal and vertical arrow buttons, that will be bigger sized than the default buttons.
Change the CSS positions of the that buttons for normal, hover and expanding stages.
Use RadSplitter control property SplitBarsSize="15" (15 or 25 - whatever you need).

Please find code bellow, where I marked with yellow those parts where you implement size changes.
For your convenience, I have also attached biggersplitterbutton.zip, a simple project together with the image sprites.

Please, find also attached splitter.gif showing the changed size buttons.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.rspResizeBar

{

background-image: url(Sprites/ResizeBarVerticalSprites.gif) !important;

}

.rspResizeBar:hover

{

background-position: -10px 0 !important;

}

.rspCollapseBarCollapse, .rspCollapseBarExpand

{

width: 15px !important;

height: 15px !important;

background-image: url(Sprites/arrowHorizontal.png) !important;

background-position: 0 0 !important;

}

.rspCollapseBarExpand

{

background-position: -15px 0 !important;

}

.rspResizeBarHorizontal

{

background-image: url(Sprites/ResizeBarHorizontalSprites.gif) !important;

}

.rspResizeBarHorizontal:hover

{

background-position: 0 -10px !important;

}

.rspCollapseBarHorizontalCollapse, .rspCollapseBarHorizontalExpand

{

width: 15px !important;

height: 15px !important;

background-image: url(Sprites/arrowVertical.png) !important;

background-position: 0 0 !important;

}

.rspCollapseBarHorizontalExpand

{

background-position: 0 -15px !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="400" Width="700" CssClass="Telerik"

ResizeMode="EndPane" SplitBarsSize="15">

<telerik:RadPane ID="Radpane1" runat="server" Width="22" Scrolling="None" MinWidth="22">

</telerik:RadPane>

<telerik:RadSplitBar ID="Radsplitbar3" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="navigationPane" runat="server">

<div>

Content

</div>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" runat="server" Scrolling="none" Width="500">

<telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" Orientation="Horizontal"

CssClass="Telerik" SplitBarsSize="15">

<telerik:RadPane ID="topPane" runat="server" Height="150" Scrolling="both">

<div style="height: 100%">

content

</div>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Forward">

</telerik:RadSplitBar>

<telerik:RadPane ID="contentPane" runat="server" Scrolling="y">

content

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

Best wishes,
Bojo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.