Problem with SlidingZone/Pane when Splitter height > 10000px

4 posts, 0 answers
  1. Chris May IT Team Lead
    Chris May IT Team Lead avatar
    31 posts
    Member since:
    Nov 2009

    Posted 10 May 2011 Link to this post

    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>
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 11 May 2011 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris May IT Team Lead
    Chris May IT Team Lead avatar
    31 posts
    Member since:
    Nov 2009

    Posted 11 May 2011 Link to this post

    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>
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 12 May 2011 Link to this post

    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.

Back to Top