why scrollbars with 100% height?

4 posts, 0 answers
  1. Eric
    Eric avatar
    82 posts
    Member since:
    Feb 2009

    Posted 25 Mar 2009 Link to this post

    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




  2. Eric
    Eric avatar
    82 posts
    Member since:
    Feb 2009

    Posted 27 Mar 2009 Link to this post

    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!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eric
    Eric avatar
    82 posts
    Member since:
    Feb 2009

    Posted 27 Mar 2009 Link to this post

    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!
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 30 Mar 2009 Link to this post

    Hello Eric,

    Straight to your questions:

    1. 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.
    2. 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%.
    3. 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.
Back to Top