ContentUrl and Scollbars

3 posts, 1 answers
  1. Noah
    Noah avatar
    10 posts
    Member since:
    Dec 2008

    Posted 25 Sep 2009 Link to this post

    Hello,

    I've been having some trouble with scroll bars appearing in a simple splitter with two panes each loading a contenturl.  (see code for three pages below.

    I've read the forums and docs up and down to no avail.  I looked at everything via firebug and iedevtoolbar and couldn't figure it out because it kept saying overflow:hidden.  Finally I added

    <style type="text/css">    
    html, body, form  
    {    
        overflow: auto;    
    }    
    </style>       




    to each of the ContentUrl pages (note the form) and it worked.  It works fine in my test page, but on my actual page where it is embedded in a few divs below a top horizontal menu its not 100% correct - the bottom scroll button is off the page.  But it is the closest thing I found.

    Where was Captain Obvious hiding on this one?

    Thanks
    -Noah

    <%@ 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></title> 
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        </telerik:RadScriptManager> 
                <telerik:RadSplitter ID="rsMain" runat="server" Width="100%" Height="100%" LiveResize="true"> 
                    <telerik:RadPane ID="pnTree" runat="server" Width="200" MinWidth="200" ContentUrl="tree.aspx"> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar ID="rsb" runat="server" CollapseMode="Forward" /> 
                    <telerik:RadPane ID="pnWS" runat="server" ContentUrl="content.aspx"> 
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 

    <%@ 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></title> 
    <style type="text/css">   
    html, body, form 
    {   
        overflow: auto;   
    }   
    </style>      
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        </telerik:RadScriptManager> 
                                        <telerik:RadTreeView ID="test" runat="server"> 
                                            <Nodes> 
                                                <telerik:RadTreeNode Text="Root"> 
                                                    <Nodes> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Test"> 
                                                        </telerik:RadTreeNode> 
                                                    </Nodes> 
                                                </telerik:RadTreeNode> 
                                            </Nodes> 
                                        </telerik:RadTreeView>    
        </form> 
    </body> 
    </html> 
     

    <%@ 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></title> 
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <div> 
         
        </div> 
        </form> 
    </body> 
    </html> 
     



  3. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 29 Sep 2009 Link to this post

    Hi Noah,
    In case you can see the "overflow:hidden" CSS setting using firebug and IEDevtoolbar, then you should be able to find out where this setting comes from. The only problem with the code that you posted, is that you have not configured your page correctly for the splitter to occupy 100% of its Height. However, apart from this, the pages are correct. I have attached my test project for your reference - I tested it with the 2009.2 826 version in IE and FF and the scrollbars appeared when I expanded the tree node.

    Could you please open a new support ticket and send me a simple running project that demonstrates the problem you have as well as detailed information on the steps I need to follow in order to reproduce it?

    Greetings,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Noah
    Noah avatar
    10 posts
    Member since:
    Dec 2008

    Posted 29 Sep 2009 Link to this post

    Hi Tsvetie,

    I discovered the solution.  The HeightOffset property was what I was missing.  I had a RadMenu in a div above the splitter.

        <div style="height:100px;">this div contains a radmenu in the real world</div> 
        <div style="height:100%"> 
        <telerik:RadSplitter ID="rsMain" runat="server" Width="100%" Height="100%" LiveResize="true" HeightOffset="100"> 
            <telerik:RadPane ID="pnTree" runat="server" Width="200" MinWidth="200" ContentUrl="tree.aspx"> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="rsb" runat="server" CollapseMode="Forward" /> 
            <telerik:RadPane ID="pnWS" runat="server" ContentUrl="content.aspx"> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        </div> 

    Thanks
    -Noah
Back to Top