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

[Solved] why scrollbars with 100% height?

3 Answers 223 Views

Splitter

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

Eric asked on 25 Mar 2009, 05:21 PM

Dear all,

I am trying to set several splitters to retrieve a look and feel similar to windows explorer.
I want one thin area at the top.
Underneath, I want an area on the left separated from the right by a Splitter bar.

First Problem: scroll bars

The code below almost work but I get both horizontal and vertical scroll bars while I would expect none.
I am trying to use 100% everywhere as I want to use the entire screen.
Any idea how to get rid of them?

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SplitterTests.aspx.cs" Inherits="Test2.SplitterTests" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!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" style="height:100%" > 
        
            <head id="Head1" runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body style="height:100%;margin:0px" scroll="no"> 
        
              <form id="form1" runat="server" style="height:100%;margin:0px"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                </asp:ScriptManager> 
        
                <script type="text/javascript"> 
        
                  function ChangeUrl(sender, args) { 
        
                      var pane = $find("<%= RadPane2.ClientID %>"); 
        
                      pane.set_contentUrl(args.get_newValue()); 
        
                  } 
        
                </script> 
        
                  <telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%" Width="100%" Orientation="Horizontal"> 
        
                    <telerik:RadPane ID="RadPane1" Runat="server" Width="100%" BackColor="Aqua" Height="30px">RadPane1 
        
                    </telerik:RadPane> 
        
                    <telerik:RadPane ID="RadPane2" Runat="server" BackColor="BlueViolet" Height="100%"> 
        
                        <telerik:RadSplitter ID="RadSplitter2" runat="server" Height="100%"> 
        
                            <telerik:RadPane ID="RadPane3" runat="server" BackColor="Beige"> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> 
        
                            <telerik:RadPane ID="RadPane4" runat="server"> 
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </telerik:RadPane> 
        
                  </telerik:RadSplitter> 
        
              </form> 
        
            </body> 
        
            </html>

Second Problem: useless javascript

You may have noticed that the javascript is useless (I inherited it from one of the samples).
But if I remove it, the entire page becomes wonky as if the first splitter had a width of 50% and the second a height of 0.
Does that make sense?

Many thanks

3 Answers, 1 is accepted

answered on 27 Mar 2009, 09:20 AM

Hum... Don't rush! One at a time, please!

I have removed the javascript problem hence I am only looking at having a RadSplitter containing a Header and another RadSplitter

I have spotted a few articles mentioning the HeightOffset attribute but I still don't seem to get it right.
I want both RadSplitters to use 100% height of their respective areas

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SplitterTests.aspx.cs" Inherits="Test2.SplitterTests" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!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" style="height:100%" > 
        
            <head id="Head1" runat="server"> 
        
                <title>Help!</title> 
        
            </head> 
        
            <body style="height:100%;margin:0px" scroll="no"> 
        
              <form id="form1" runat="server" style="height:100%;margin:0px"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                </asp:ScriptManager> 
        
                <!-- I think RadSplitter1 is ok --> 
        
                  <telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%" Width="100%" Orientation="Horizontal"> 
        
                    <telerik:RadPane ID="RadPane1" Runat="server" Width="100%" BackColor="Aqua" Height="30px">RadPane1 
        
                    </telerik:RadPane> 
        
                    <telerik:RadPane ID="RadPane2" Runat="server" BackColor="BlueViolet" Height="100%"> 
        
                        <!-- but RadSplitter2 does not seem to care about HeightOffset --> 
        
                        <telerik:RadSplitter ID="RadSplitter2" runat="server" Height="100%" HeightOffset="100"> 
        
                            <telerik:RadPane ID="RadPane3" runat="server" BackColor="Beige"> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadSplitBar1" runat="server"/> 
        
                            <telerik:RadPane ID="RadPane4" runat="server"> 
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </telerik:RadPane> 
        
                  </telerik:RadSplitter> 
        
              </form> 
        
            </body> 
        
            </html>

Am I asking too much of Telerik?
Come on... You can do it!

answered on 27 Mar 2009, 12:22 PM

For the record...
I have just discovered that my problem seems to be RadPane2 rather than the splitter...

I am able to hide(remove?) the problem by disallowing scroll bars on RadPane2 and the HeightOffset on RadSplitter2 appears useless in this case

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SplitterTests.aspx.cs" Inherits="Test2.SplitterTests" %>  
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>  
        
            <!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" style="height:100%" >  
        
            <head id="Head1" runat="server">  
        
                <title>Help!</title>  
        
            </head>  
        
            <body style="height:100%;margin:0px" scroll="no">  
        
              <form id="form1" runat="server" style="height:100%;margin:0px">  
        
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                </asp:ScriptManager>  
        
                <!-- I think RadSplitter1 is ok -->  
        
                  <telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%" Width="100%" Orientation="Horizontal">  
        
                    <telerik:RadPane ID="RadPane1" Runat="server" Width="100%" BackColor="Aqua" Height="30px">RadPane1  
        
                    </telerik:RadPane>  
        
                    <telerik:RadPane ID="RadPane2" Runat="server" BackColor="BlueViolet" Height="100%" BorderStyle="None" Scrolling="None">  
        
                        <!-- but RadSplitter2 does not seem to care about HeightOffset -->  
        
                        <telerik:RadSplitter ID="RadSplitter2" runat="server" Height="100%">  
        
                            <telerik:RadPane ID="RadPane3" runat="server" BackColor="Beige">  
        
                            </telerik:RadPane>  
        
                            <telerik:RadSplitBar ID="RadSplitBar1" runat="server"/>  
        
                            <telerik:RadPane ID="RadPane4" runat="server">  
        
                            </telerik:RadPane>  
        
                        </telerik:RadSplitter>  
        
                    </telerik:RadPane>  
        
                  </telerik:RadSplitter>  
        
              </form>  
        
            </body>  
        
            </html>

Although I don't understand it all yet, this will solve my problem.

Thanks Eric. You're a star!

answered on 30 Mar 2009, 08:12 AM

Hello Eric,

Straight to your questions:

I built up a test demo based on the code provided in your initial post. However, I was not able to reproduce the unnecessary scrollbars and when I removed the script, nothing changed.
The HeightOffset property is used when you want to have an additional element outside the splitter but I did not see such in your code. Note, also, that by default when you have a RadSplitter nested in a RadPane, the splitter automatically resizes itself to occupy 100% of the RadPane and that is why it did not respect your setting. If you want to turn off this, you should set ResizeWithParentPane=false for the splitter and set the HeightOffset property along with Width, Height set to 100%.
Indeed, when you use a RadSplitter nested in a RadPane you should set the Scrolling of the parent pane to be None. This should be done because otherwise you will get double scrollbars if the content is too big - the first scrollbar will be generated by the splitter and the second one - by the RadPane.

In case you need further assistance, please open a new support ticket and send me a sample, fully runnable reproduction demo along with screenshots of the actual and the desired layout. Once I have a better understanding on your exact goal I will do my best to help.

Kind regards,
Svetlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.