Splitter Scroll Bars and Content Types

3 posts, 0 answers
  1. PaladinMRB
    PaladinMRB avatar
    8 posts
    Member since:
    Dec 2008

    Posted 15 Dec 2008 Link to this post

    Hello, I've run into an issue with setting the "Scrolling" attribute on splitters and the behavior it causes between splitter pane content types. Specifically whether the content is inline in the splitter pane or the content is retrieved remotely using the ContentURL attribute.

    First for some test code:

    Main Test Page
    The following ASPX page contains two splitter examples, one holds inline content the other retrieves it's content from another ASPX page. This page has no Code Behind. There are no styles/CSS being used (K.I.S.S. test)
    <%@ Page Language="VB" %> 
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head id="Head1" runat="server"
        <title>LocalHost Dev Site :: Telerik Splitter Test 001</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            
        <asp:ScriptManager ID="smTest1" runat="server" /> 
         
        <div> 
            <telerik:RadSplitter ID="rsTest1" runat="server"
                <telerik:RadPane ID="rpTest1_1" runat="server"
                    <h1>Pane 1</h1> 
                    <p>Inline Content Test</p> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="rspTest1" CollapseMode="forward" runat="server" /> 
                <telerik:RadPane ID="rpTest1_2" Scrolling="None" runat="server"
                    <h1>Antidisestablishmentarianism</h1> 
                    <h2>Content In Page</h2> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </div> 
        <br /><br /> 
        <div> 
            <telerik:RadSplitter ID="rsTest2" runat="server"
                <telerik:RadPane ID="rpTest2_1" runat="server"
                    <h1>Pane 2</h1> 
                    <p>Loaded Content Test</p> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="rspTest2" CollapseMode="forward" runat="server" /> 
                <telerik:RadPane ID="rpTest2_2" Scrolling="None" ContentUrl="TestSplitterContent.aspx" runat="server" />          
            </telerik:RadSplitter> 
        </div> 
        <br /><br /> 
        </form> 
    </body> 
    </html> 


    Nested Content Page
    Here is the ASPX page that is the specified content for the second splitter. This page, besides the necessary full page code, has exactly the same content that is inline in the first splitter example. This page has no code behind. There are no styles/CSS being used (K.I.S.S. test)
    <%@ Page Language="VB" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server"
     
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <div> 
            <h1>Antidisestablishmentarianism</h1> 
            <h2>Remote Content Loaded in iFrame</h2> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
        </div> 
        </form> 
    </body> 
    </html> 


    Now this test was implemented to test the scrolling behavior between the two content types.

    On Splitter example #1 (Inline Content), when I set Scrolling="both" I get both scroll bars as necessary, when I set Scrolling="Y" I get only a vertical scroll bar, when I set Scrolling="X" I get a horizontal scroll bar, and when I set Scrolling="None" I get no scroll bars. This is the advertised and expected behavior.

    On splitter example #2 (Loaded Content), when I set Scrolling="both" I get both scroll bars, when I set Scrolling="None" I get no scroll bars. Now here is the quandry, when I set Scrolling to either "X" or "Y" I get BOTH scroll bars when only the X or Y scroll bar should appear respectively. Obviously my problem is that I am attempting to load content into a splitter pane using ContentURL where I'd like only one orientation of scroll bar to appear (the vertical Y bar), and am currently not able to do this natively with the Telerik control in this test or in my production environment.

    Thus the questions... Is this a bug? Am I implementing the control incorrectly? Is there some conflict between the SplitterPane and the iFrame it implements to contain the loaded content page? Is there another reason?

    Any help would be appreciated, thanks!

    PS: Enivronment is: WinXP Pro v2002 SP3 / IIS 5.1 / IE v7.0.5730.13 / FF v3.0.4 / Telerik ASP.NET Ajax Control DLL v2008.3.1105.20

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 17 Dec 2008 Link to this post

    Hi PaladinMRB,
    The RadPane has control only over the elements it creates and does not modify the page you open in the IFRAME it creates. That is why, regarding the scrolling functionality, the IFRAME can set only whether the page will display scrollbars or not - the valid values for its scrolling attribute are:
    1. auto (default)
    2. yes
    3. no

    Please refer to the W3 site for additional information on the scrolling attribute of the IFRAME element.

    That is why, in this case, it depends only on the page, opened in the IFRAME, what kind of scrollbar will be available. In order to show only the vertical scrollbar, you need to add the following style definition to the HEAD of the page you open in the RadPane:

    <style type="text/css">  
    html, body  
    {  
        overflow-x: hidden;  
        overflow-y: auto;  
    }  
    </style> 

    All the best,

    Tsvetie
    the Telerik team

     


    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. PaladinMRB
    PaladinMRB avatar
    8 posts
    Member since:
    Dec 2008

    Posted 18 Dec 2008 Link to this post

    Thank you Tsvetie, setting the CSS style on the content page as recommended appears to work.
Back to Top