SildePane on the rigth, open to Bottom

2 posts, 1 answers
  1. July
    July avatar
    205 posts
    Member since:
    Jul 2011

    Posted 20 Dec 2011 Link to this post

    I need put the slidePane on the rigth..

    I create a user control with Slidepane (help pane).
    I set put on the rigth of title....

    Help Test is a Titlte Div....
    I need put Help Panel on the rigth (where is red arrow).

    Page code: aspx

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      <div class="headerPage">
                <asp:Label ID="lblTitle" runat="server"></asp:Label>
                <div style="position:absolute; top:0; right:0; position:absolute; float:right">
               <UC:Help runat="server" ID="Help1" />
              <div >
      <div class="containerSub">


    user Control code

      <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="90%" Height="300px" Skin="Vista">
                    <telerik:RadPane ID="Radpane1" runat="server" Height="19px" Scrolling="none" >
                        <telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Height="19px" SlideDirection="Bottom">
                            <telerik:RadSlidingPane ID="Radslidingpane4" Title="Help" runat="server" Height="110px">
                                <div  style="font-size:9px; font-family:inherit">
                                    <ul id="ulHelp" runat="server" style="font-size:9px; font-family:inherit">
                                <div><asp:LinkButton CssClass="containerRegistration link" runat="server" ID="lnkReadMore" ></asp:LinkButton></div>

  2. Answer
    Dobromir avatar
    1633 posts

    Posted 21 Dec 2011 Link to this post

    Hi Julieta,

    RadSplitter does not offer the required functionality out of the box. However, it is possible to achieve the required result using the following approach:
    1. Add CssClass to the pane containing the sliding zone to be used for a cascade. For example rightAlignedTabs
    2. Use the following CSS to align the tabs to the right:
      .rightAlignedTabs .rspTabsContainer
          float: right !important;       
    3. Handle the OnClientExpanded client-side event of the sliding pane to position it correctly, e.g.:
      <script type="text/javascript">
          function OnClientExpanded(spane, args)
              var paneElement = spane.get_element();
     = "1px";

    For your convenience I have attached a sample page demonstrating this approach.

    In addition, in the provided markup I noticed that you are using a splitter with a single pane. Please note that this is not supported scenario and it may cause unexpected behavior.
    All the best,
    the Telerik team
    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 their blog feed now
  3. DevCraft R3 2016 release webinar banner
Back to Top