RadSplitBar image position

3 posts, 1 answers
  1. Andrew
    Andrew avatar
    125 posts
    Member since:
    Sep 2008

    Posted 05 Jul 2013 Link to this post

    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. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 10 Jul 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    125 posts
    Member since:
    Sep 2008

    Posted 10 Jul 2013 Link to this post

    great thanks
Back to Top