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

SildePane on the rigth, open to Bottom

1 Answer 37 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
July
Top achievements
Rank 2
July asked on 20 Dec 2011, 05:10 PM
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

1 Answer, 1 is accepted

Sort by
0
Accepted
Dobromir
Telerik team
answered on 21 Dec 2011, 06:29 PM
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
Tags
Splitter
Asked by
July
Top achievements
Rank 2
Answers by
Dobromir
Telerik team
Share this question
or