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

RadSplitBar image position

2 Answers 66 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Veteran
Iron
Andrew asked on 05 Jul 2013, 02:42 PM
I was wondering if there is anyway to position the open/close image of the radsplitbar near the top of the bar instead of in the middle?

also it it possible to have more then one open/close button on the bar (ex. top, middle, bottom).

Thanks,
Andrew Day

2 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 10 Jul 2013, 08:23 AM
Hi,

You could change the position of the left/right arrows by using CSS and applying vertical align to the cell containing the arrows:

<!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">
        .RadSplitter td.rspResizeBar {
            vertical-align: top; /* position the left/right arrow on top */
            padding: 30px 0 0; /* defines padding of top 30px to move the arrows 30px down - could be changed to meet requierments */
        }
    </style>
</head>
<body style="background: #fff;">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm1" runat="server" />
     
 
    <telerik:RadSplitter ID="RadSplitter1" runat="server" EnableEmbeddedBaseStylesheet="true"
        EnableEmbeddedSkins="true" Skin="Default" Height="300" >
        <telerik:RadPane ID="RadPane1" runat="server" Width="40px">
            <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">
                <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Pane1">
                    hello world
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane2" runat="server">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane3" runat="server" Width="22px">
            <telerik:RadSlidingZone ID="RadSlidingZone3" runat="server" SlideDirection="Left"
                ClickToOpen="true">
                <telerik:RadSlidingPane ID="RadSlidingPane3" runat="server" Title="Pane2">
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
    </telerik:RadSplitter>
    <br />
    <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal"
        EnableEmbeddedBaseStylesheet="true" EnableEmbeddedSkins="true" Skin="Default">
        <telerik:RadPane ID="RadPane4" runat="server" Height="40px">
            <telerik:RadSlidingZone ID="RadSlidingZone2" runat="server" >
                <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Pane1">
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane5" runat="server">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar4" runat="server" CollapseMode="Both"
            EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane6" runat="server" Height="22px">
            <telerik:RadSlidingZone ID="RadSlidingZone4" runat="server" SlideDirection="top"
                ClickToOpen="true">
                <telerik:RadSlidingPane ID="RadSlidingPane4" runat="server" Title="Pane2">
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
    </telerik:RadSplitter>
     
 
    </form>
</body>
</html>

As for your second question: also it it possible to have more then one open/close button on the bar (ex. top, middle, bottom). - I have never been asked such a question. Most probably it is possible, but it requires to change the HTML rendering and to add two more containers wrapping the arrows. This could be layout breaking and  could seriously mess the CSS rules, so I would not recommend it. Also it is a custom solution and it is out of the scope of our support, so it is a developers decision and repsonibility to apply it and maintain it in order the control to work properly.

Regards,
Bozhidar
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Andrew
Top achievements
Rank 1
Veteran
Iron
answered on 10 Jul 2013, 12:25 PM
great thanks
Tags
Splitter
Asked by
Andrew
Top achievements
Rank 1
Veteran
Iron
Answers by
Bozhidar
Telerik team
Andrew
Top achievements
Rank 1
Veteran
Iron
Share this question
or