Sliding Pane Width Problem

2 posts, 1 answers
  1. Robin
    Robin avatar
    30 posts
    Member since:
    Jun 2012

    Posted 04 Sep 2012 Link to this post


    I am using a RadSlidingPane. It works just fine if the pane is docked, but as soon as i undock it and expand it again (just expand it, not dock it), the content shrinks to a few pixels on the left side of the pane, leaving the rest of it blank white.
    I've got some sample code right here:

    <telerik:RadPane ID="LeftPane" runat="Server" Height="100%" MinWidth="283" MaxWidth="283" Width="283">
    <telerik:RadSlidingZone ID="RadSlidingZoneLeft" Skin="Windows7" runat="server"
          DockedPaneID="RadSlidingPaneLeft" BorderStyle="None">
                <telerik:RadSlidingPane ID="RadSlidingPaneLeft" Skin="Windows7" runat="server"
                         MinWidth="283" MaxWidth="283" Width="283"  EnableResize="False"
                           Title="Test" Scrolling="None">
                        <telerik:RadSplitter runat="server" ID="RadSplitter3" Height="100%"
                  Orientation="Horizontal" MinWidth="283" MaxWidth="283" Width="283"  CssClass="BorderLeft">
                                <telerik:RadPane runat="server" ID="Pane1" BorderStyle="None"
                                    MinWidth="283" MaxWidth="283" Width="283">
                     <telerik:RadPane runat="server" ID="Pane2" BorderStyle="None" 
                        Height="120px" MinWidth="283" MaxWidth="283" Width="283"  Scrolling="Y">

    I can tell that the problem has to be connected to the RadSplitter3, because I used the .css attached to it for a border on the right side of it. However, that border shows up, but only after the already mentioned few pixels on the left side of the SlidingPane, seemingly limiting the whole content.

    Thanks in advance,
  2. Answer
    Vessy avatar
    1887 posts

    Posted 06 Sep 2012 Link to this post

    Hi Robin,

    The issue you are experiencing indeed is caused by the nested RadSplitter3. The reason for this behavior is that when a splitter is nested it inherits the sizes of its parent RadPane (in this case = 22px).

    When the SlidingPane is docked, its parent pane (the LeftPane) is expanded so its size is set to 22px+283px and the splitter is resized like it is expected. When the SlidigZone is undocked, the LeftPane receives back its original size (width = 22px) so now the RadSplitter3 is also recalculated to 22px.

    In order to avoid this behavior you have to set its ResizeWithParentPane property to false and its height and width up to a 100%:
    <telerik:RadSplitter runat="server" ID="RadSplitter3" Orientation="Horizontal"
        CssClass="BorderLeft" ResizeWithParentPane="false" Width="100%" Height="100%">

    Kind regards,
    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.
Back to Top