Spittler Height

3 posts, 1 answers
  1. Bruce St.Clair
    Bruce St.Clair avatar
    27 posts
    Member since:
    Jan 2008

    Posted 09 Jun 2008 Link to this post

    After scanning the answers to what my problem is and viewing using http://www.telerik.com/demos/aspnet/prometheus/Splitter/Examples/ResizeWithWindow/DefaultCS.aspx

    I am still having a problem with the splitter height.  I can set
     
    <body scroll="no">
    and it removes the scroll bars but the bottom of the page is hidden.  Attached is a simple drop down at the top with a splitter and 2 panes.  pane 1 contains a tree and pane 2 is a calendar just so I can see the results.  Default code behind is stock.  Usign VS2008 and Telerik Version 2008.1.145.35.

    Here is the default.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
     
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">   
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
        <script type="text/javascript">  
          
          function pageLoad() {  
          }  
          
        </script> 
        <style type="text/css">  
     
    html, body, form    
    {    
    height: 100%;    
     
    }    
        
     
    .RadComboBox_Default  
    {  
        vertical-align:bottom;  
    }  
     
    .RadComboBox_Default  
    {  
        font:12px arial,verdana,sans-serif;  
        color:#000;  
        text-align: left;  
    }  
     
     
    .RadComboBox_Default *  
    {  
        margin:0;  
        padding:0;  
    }  
     
    .RadComboBox_Default .rcbInputCell  
    {  
        padding-left: 2px;  
    }  
     
    .RadComboBox_Default .rcbInputCell  
    {  
     
        height:21px;  
        line-height:20px;  
        border:1px solid #7d7d7d;  
        vertical-align:top;  
        background: #fff;  
        padding:0;  
    }  
     
    .RadComboBox_Default .rcbInputCell input  
    {  
        padding-left: 2px;  
    }  
     
    .RadComboBox_Default .rcbInputCell input  
    {  
        width:100%;  
        background:transparent;  
        border:0;  
        vertical-align:top;  
        padding:3px 0 0 0;  
        color: #373737;  
    }  
     
    .RadComboBox_Default input  
    {  
        font:12px arial,verdana,sans-serif;  
        color:#000;  
        text-align: left;  
    }  
     
    .RadComboBox_Default .rcbArrowCellRight  
    {  
        border-left-width: 0;  
    }  
     
    .RadComboBox_Default .rcbArrowCell  
    {  
        background:url('mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.ComboBox.rcbArrowCell.gif') no-repeat 0 0;  
        width:27px;  
        border: 1px solid #7d7d7d;  
        padding:0;  
    }  
     
    .RadComboBox_Default .rcbArrowCell a  
    {  
        line-height:21px;  
        width:27px;  
        height:21px;  
        text-decoration:none;  
        text-indent: -9999px;  
        font-size: 0;  
    }  
     
        .RadTreeView_Default  
    {  
        font:11px tahoma,verdana,sans-serif;  
        color:#000;  
        line-height:1.273em;  
    }  
     
    .RadTreeView  
    {  
        white-space:nowrap;  
        cursor: default;  
    }  
     
    .RadTreeView .rtUL  
    {  
        zoom:1;  
    }  
     
    .RadTreeView .rtUL  
    {  
        list-style:none;  
        margin:0;  
        padding:0;  
    }  
     
    .RadTreeView_Default .rtLines .rtLast  
    {  
        background:none;  
    }  
     
    .RadTreeView_Default .rtLines .rtFirst  
    {  
        background:url(mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.TreeView.FirstNodeSpan.gif) no-repeat 0 1.273em;  
    }  
     
    .RadTreeView_Default .rtLines .rtLI  
    {  
        background:url(mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.TreeView.NodeSpan.gif) repeat-y 0 0;  
    }  
     
    .RadTreeView_Default .rtLines .rtLast .rtTop  
    {  
        background:url(mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.TreeView.SingleLine.gif) 0 0 no-repeat;  
    }  
     
    .RadTreeView_Default .rtLines .rtTop  
    {  
        background:url(mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.TreeView.TopLine.gif) 0 0 no-repeat;  
    }  
     
    .RadTreeView_Default .rtTop  
    {  
        padding: 0 0 0 20px;  
    }  
     
    .RadTreeView .rtTop  
    {  
        zoom:1;  
    }  
     
    .RadTreeView_Default .rtSp  
    {  
        height:17px;  
    }  
     
    .RadTreeView .rtSp  
    {  
        display: -moz-inline-box;  
        display: inline-block;  
        width: 1px;  
        vertical-align: middle;  
    }  
     
    .RadTreeView_Default .rtPlus  
    {  
        background: transparent url(mvwres://Telerik.Web.UI, Version=2008.1.415.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.TreeView.PlusMinus.gif) no-repeat 0 0;  
    }  
     
    .RadTreeView_Default .rtPlus  
    {  
        margin:4px 6px 0 -18px;  
        width:11px;  
        height:11px;  
    }  
     
    .RadTreeView .rtPlus  
    {  
        font-size:0;  
        padding:0;  
        display: -moz-inline-box;  
        display:inline-block;  
        vertical-align:top;  
        cursor: pointer;  
    }  
     
    .RadTreeView_Default .rtIn  
    {  
        margin-left:3px;  
        padding: 2px;  
    }  
     
    .RadTreeView .rtIn  
    {  
        vertical-align:middle;  
    }  
     
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">  
        </telerik:RadStyleSheetManager> 
        <div> 
            <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">  
            </telerik:RadScriptManager> 
        <br /> 
        <br /> 
            <telerik:RadComboBox ID="RadComboBox1" runat="server">  
                <Items> 
                    <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" /> 
                    <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" /> 
                    <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" /> 
                    <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" /> 
                </Items> 
    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
            </telerik:RadComboBox> 
        </div> 
        <div id="ParentDivElement" style="height: 100%;">   
        <telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%" Width="100%"   
            style="z-index: 1; left: 10px; top: 141px; position: absolute; height: 421px; width: 795px">  
            <telerik:RadPane ID="RadPane1" Runat="server"   
                style="z-index: 1; left: 1px; top: 22px; position: absolute; height: 389px; width: 234px"   
                Width="20%">  
                <telerik:RadTreeView ID="RadTreeView1" Runat="server"   
                    style="z-index: 1; left: 1px; top: 95px; position: inherit; height: 44px; width: 213px">  
                    <Nodes> 
                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">  
                            <Nodes> 
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
                                </telerik:RadTreeNode> 
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
                                </telerik:RadTreeNode> 
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">  
                                </telerik:RadTreeNode> 
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">  
                                </telerik:RadTreeNode> 
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 5">  
                                </telerik:RadTreeNode> 
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 6">  
                                </telerik:RadTreeNode> 
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 7">  
                                </telerik:RadTreeNode> 
                            </Nodes> 
                        </telerik:RadTreeNode> 
                    </Nodes> 
                    <CollapseAnimation Duration="100" Type="OutQuint" /> 
                    <ExpandAnimation Duration="100" /> 
                </telerik:RadTreeView> 
            </telerik:RadPane> 
                    <telerik:RadSplitBar ID="RadSplitBar1" Runat="server"   
                  
                style="z-index: 1; left: 1px; top: 22px; position: absolute; height: 1px; width: 793px"   
                CollapseMode="Forward" /> 
            <telerik:RadPane ID="RadPane2" Runat="server"   
                  
                style="z-index: 1; left: 259px; top: 41px; position: absolute; height: 361px; width: 431px"   
                Width="80%">  
                <telerik:RadCalendar ID="RadCalendar1" Runat="server"   
                    font-names="Arial, Verdana, Tahoma" forecolor="Black"   
                    style="border-color:#ececec">  
                </telerik:RadCalendar> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        </div> 
        </form> 
    </body> 
    </html> 
     



    Thanks for any help that can be provided.



  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 10 Jun 2008 Link to this post

    Hello Bruce,

    I am not quite sure whether I completely understand the problem but I assume that you want to remove the vertical scrollbar of the browser.

    If I am right there are different approaches to do this, depending on your particular layout and needs. The reason for the scrollbar is that the RadSplitter's parent DIV element has its height set to 100% and it makes it occupy 100% of the page. At the same time you have another DIV element which is outside the above mentioned DIV and it also occupies some space and that causes the overflow.

    There are different manners to solve the problem, e.g:

    1. Set both DIVs such sizes that the resultant sum will be 100%.
    2. Use nested RadSplitters instead of DIV elements. 
    3. Remove the parent DIV and set the RadSplitter's HeightOffset property to the desired value.

    For your convenience I am attaching your project modified according to my first suggestion.


    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Bruce St.Clair
    Bruce St.Clair avatar
    27 posts
    Member since:
    Jan 2008

    Posted 10 Jun 2008 Link to this post

    Thank you very much that did the trick.
Back to Top