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.
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
0
Hi Rajesh,
In order to have a bigger splitter button, you should follow the steps bellow:
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.
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.
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).
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"> <!-- Left Pane Content --> <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"> <!-- Nested Horizontal splitter --> <telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" Orientation="Horizontal" CssClass="Telerik" SplitBarsSize="15"> <telerik:RadPane ID="topPane" runat="server" Height="150" Scrolling="both"> <!-- Top Pane Content --> <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.