Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

ContentUrl and Scollbars

2 Answers 58 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Noah
Top achievements
Rank 2
Noah asked on 26 Sep 2009, 02:02 AM
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> 
 



2 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetie
Telerik team
answered on 29 Sep 2009, 09:21 AM
contenturlscrollbars.zip
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.
0
Noah
Top achievements
Rank 2
answered on 29 Sep 2009, 05:29 PM
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
Tags
Splitter
Asked by
Noah
Top achievements
Rank 2
Answers by
Tsvetie
Telerik team
Noah
Top achievements
Rank 2
Share this question
or