Horizontal Splitter

3 posts, 0 answers
  1. Cush
    Cush avatar
    88 posts
    Member since:
    Apr 2010

    Posted 05 Dec 2010 Link to this post

    Hi All

    I have got a Vertical Splitterand and a Horizontal splitter on the same page,
    Everything seems to be fine untill i collapse the Horizontal one? The Horizontal one wont keep its proportions after that?
    I have posted my code if anyone has any ideas i would appricate hearing them.

    Many Thanks


    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <head runat="server">
        <style type="text/css">
            hmtl, body, form , a img
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
                border: 0;
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <div id="ParentDivElement" style="height: 100%;">
         <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" LiveResize="True"
                Orientation="Horizontal" Skin="Web20" Width="100%" VisibleDuringInit="false"
                FullScreenMode="True" BorderColor="0">
                <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Height="450px" MaxHeight="450" MinHeight="450">
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward">
                <telerik:RadPane ID="RadPane3" runat="server" Scrolling="None" Index="2" Height="250px" MaxHeight="250" MinHeight="250" >
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical" 
                        Skin="Web20" VisibleDuringInit="false" BorderColor="0" Width="100%" Height="100%">                
                 <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None">
                    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Bottom" DockedPaneId="RadSlidingPane2">
                        <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Child Movements" ViewStateMode="Inherit"  DockOnOpen="true" IconUrl="Images/Icons/cmove16.png" Scrolling="None" Height="500" Width="250" MinWidth="500">
                        <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Movement Notes" ViewStateMode="Inherit" DockOnOpen="true" IconUrl="Images/Icons/note16.png" Scrolling="None" Height="500" Width="250" MinWidth="500">                        
                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both">
                        <telerik:RadPane ID="RadPane4" runat="server">
                            <telerik:RadSlidingZone ID="RadSlidingZone2" runat="server" SlideDirection="Bottom">
                                <telerik:RadSlidingPane ID="RadSlidingPane3" runat="server" Title="Future Stuff" Height="230" Width="500"  >
  2. Dobromir
    Dobromir avatar
    1633 posts

    Posted 08 Dec 2010 Link to this post

    Hi Darren,

    The problem occurs because the used RadSplitter configuration is not supported - you cannot have sliding zone with SlidingDirection="Bottom" or SlidingDirection="Top" in a vertical splitter. Respectively , you cannot have sliding zone with SlideDirection Left / Right in a horizontal splitter.

    This restriction is because, by design, RadSlidingZone occupy 100% width (or height) of its parent RadPane when the splitter is horizontal (or vertical).

    In order to achieve the required functionality I suggest you to use another horizontal splitter, e.g.:
    <telerik:RadPane ID="RadPane3" runat="server" Scrolling="None" Index="2" Height="250px"
        MaxHeight="250" MinHeight="250">
        <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical" Skin="Web20"
            VisibleDuringInit="false" BorderColor="0" Width="100%" Height="100%">
            <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None">
                <telerik:RadSplitter ID="RadSplitter3" runat="server" Skin="Web20" Orientation="Horizontal">
                    <telerik:RadPane ID="RadPane3_1" runat="server">
                        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Bottom"

    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. DevCraft R3 2016 release webinar banner
  4. Cush
    Cush avatar
    88 posts
    Member since:
    Apr 2010

    Posted 09 Dec 2010 Link to this post

    Thanks a lot Dobromir

    That makes sense now
Back to Top