Hello,
There's a problem when using a SlidingZone inside a Splitter Pane, if the height of the Splitter exceeds 10000. Our production page includes a RadDockLayout, and we dynamically size the Splitter to the height of the layout, but this simple example demonstrates the problem:
There's a problem when using a SlidingZone inside a Splitter Pane, if the height of the Splitter exceeds 10000. Our production page includes a RadDockLayout, and we dynamically size the Splitter to the height of the layout, but this simple example demonstrates the problem:
<%@ Page Language="vb" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Test</title></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="true" runat="server"> </telerik:RadScriptManager> <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%" Height="10050"> <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Width="100%"> This is the Left pane </telerik:RadPane> <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None" Width="22px"> <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Left"> <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Menu" runat="server" EnableDock="false" BackColor="Red" Width="300px" PersistScrollPosition="False" Scrolling="None"> </telerik:RadSlidingPane> </telerik:RadSlidingZone> </telerik:RadPane> </telerik:RadSplitter> </form></body></html>3 Answers, 1 is accepted
0
Hi Patrick,
I already answered your support ticket on the subject. For convenience I will post my answer here as well.
This problem occurs because of the height of the splitter / slidingzone. By when the sliding pane is collapsed it is positioned out of the viewport with CSS rule top: -9999px, and since the sliding zone is higher than 9999px and its bottom part remains inside the viewport.
To avoid this issue you can use the following CSS:
Best wishes,
Dobromir
the Telerik team
I already answered your support ticket on the subject. For convenience I will post my answer here as well.
This problem occurs because of the height of the splitter / slidingzone. By when the sliding pane is collapsed it is positioned out of the viewport with CSS rule top: -9999px, and since the sliding zone is higher than 9999px and its bottom part remains inside the viewport.
To avoid this issue you can use the following CSS:
.RadSplitter .rspSlidePane, .RadSlidingPaneQuirksMode{ top: -99999px !important;}Best wishes,
Dobromir
the Telerik team
Browse the vast support resources we have to jump start 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.
0
Quinten
Top achievements
Rank 1
Rank 1
answered on 11 May 2011, 07:36 PM
Dobromir,
Thanks for your quick reply! Perhaps I'm not understanding how to properly implement your suggestion, but I could not get it to work. I implemented as pasted below, but the menu doesn't appear at all. Should I be manually reproducing the stylesheet for the entire skin?
Thank you,
Rob
Thanks for your quick reply! Perhaps I'm not understanding how to properly implement your suggestion, but I could not get it to work. I implemented as pasted below, but the menu doesn't appear at all. Should I be manually reproducing the stylesheet for the entire skin?
Thank you,
Rob
<%@ Page Language="vb" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Test</title> <style type="text/css"> .RadSplitter .rspSlidePane, .RadSlidingPaneQuirksMode { top: -99999px !important; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="true" runat="server"> </telerik:RadScriptManager> <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%" Height="10050"> <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Width="100%"> This is the Left pane </telerik:RadPane> <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None" Width="22px"> <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Left"> <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Menu" runat="server" EnableDock="false" BackColor="Red" Width="300px" PersistScrollPosition="False" Scrolling="None"> </telerik:RadSlidingPane> </telerik:RadSlidingZone> </telerik:RadPane> </telerik:RadSplitter> </form></body></html>0
Hi Patrick,
Please accept my sincere apologies for providing an incorrect CSS in my previous reply. Here is the correct one:
For your convenience I have attached a sample page with the workaround applied.
Kind regards,
Dobromir
the Telerik team
Please accept my sincere apologies for providing an incorrect CSS in my previous reply. Here is the correct one:
.RadSplitter div.rspSlidePane, .RadSlidingPaneQuirksMode{ top: -99999px;}For your convenience I have attached a sample page with the workaround applied.
Kind regards,
Dobromir
the Telerik team
Browse the vast support resources we have to jump start 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.