This is a migrated thread and some comments may be shown as answers.
Problem with SlidingZone/Pane when Splitter height > 10000px
3 Answers 11 Views
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 10 May 2011, 08:19 PM
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:

<%@ 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">
<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

Sort by
0
Dobromir
Telerik team
answered on 11 May 2011, 08:55 AM
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:
.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
Dan
Top achievements
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

<%@ 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">
<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
Dobromir
Telerik team
answered on 12 May 2011, 10:09 AM
Hi Patrick,

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.

Asked by
Dan
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Dan
Top achievements
Rank 1
Share this question
or