Sliding Pane Width Problem

[Robin]

Hi,

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>

                <telerik:RadPane runat="server" ID="Pane2" BorderStyle="None"
                   Height="120px" MinWidth="283" MaxWidth="283" Width="283"  Scrolling="Y">

                   [...]

                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
</telerik:RadPane>

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

[Vessy]

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%">
    .....
</telerik:RadSplitter>

Kind regards,
Veselina
the Telerik team