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

[Solved] Spittler Height

2 Answers 234 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Bruce St.Clair
Top achievements
Rank 2
Bruce St.Clair asked on 09 Jun 2008, 06:00 PM
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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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 Answers, 1 is accepted

Sort by
0
Accepted
Svetlina Anati
Telerik team
answered on 10 Jun 2008, 11:18 AM
SplitterHeightTest.zip
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
0
Bruce St.Clair
Top achievements
Rank 2
answered on 10 Jun 2008, 07:20 PM
Thank you very much that did the trick.
Tags
Splitter
Asked by
Bruce St.Clair
Top achievements
Rank 2
Answers by
Svetlina Anati
Telerik team
Bruce St.Clair
Top achievements
Rank 2
Share this question
or