This is a migrated thread and some comments may be shown as answers.

Splitter Scroll Bars and Content Types

2 Answers 111 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

PaladinMRB asked on 15 Dec 2008, 08:36 PM

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 Answers, 1 is accepted

answered on 17 Dec 2008, 08:34 AM

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:

auto (default)
yes
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Splitter Scroll Bars and Content Types

2 Answers, 1 is accepted