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

Telerik is a recommandable product....

1 Answer 19 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
raaj
Top achievements
Rank 1
raaj asked on 27 May 2010, 08:05 AM
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

Sort by
0
Bozhidar
Telerik team
answered on 27 May 2010, 03:21 PM
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">
<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.
Tags
Splitter
Asked by
raaj
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or