Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > SildePane on the rigth, open to Bottom

• July Intermediate

  Posted on Dec 20, 2011 (permalink)

  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>
  <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>
    <div class="containerSub">
  
  </div>
  </asp:Content>
  
  user Control code
  ASpx
  
  
    <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">
                                      
                                  </ul>
                              </div>
                              <div><asp:LinkButton CssClass="containerRegistration link" runat="server" ID="lnkReadMore" ></asp:LinkButton></div>
                              </telerik:RadSlidingPane>
                          
                      </telerik:RadSlidingZone>
                  </telerik:RadPane>
                 
                 
              </telerik:RadSplitter>
  
  thanks

  Reply

• Answer Dobromir Dobromir

  Posted on Dec 21, 2011 (permalink)

  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();

             paneElement.style.left = "1px";

         }      

     </script>

  
  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,
  Dobromir
  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

  Attached files

  • Default-aspx.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > SildePane on the rigth, open to Bottom