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

Bottom of scrollbar is cut off in browser

2 Answers 1620 Views

Splitter

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

Nicko asked on 07 Sep 2010, 07:26 PM

9-7-2010-1-15-14-pm.png

I trying to use a rad splitter within a fixed header. There is a left pane for navigation and notification and a main content pane. The bottom portion of the scroll bar gets cut off and I can't figure out what I am doing wrong. I would really appreciate anyone who can point me in the right direction. Below is the code and attached is a screen shot of what I am ending up with.

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>

<asp:ContentPlaceHolder ID="HeadContent" runat="server">

</asp:ContentPlaceHolder>

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

}

html {

height:100%;

max-height:100%;

padding:0;

margin:0;

border:0;

/* hide overflow:hidden from IE5/Mac */

overflow: visible;

}

body {

height:100%;

max-height:100%;

overflow:hidden;

padding:0;

margin:0;

border:0;

background:#fff;

font-family:arial, verdana, sans-serif;

font-size:76%;

min-width:550px;

}

#container

{

overflow:auto;

position:absolute;

z-index:3;

height:100%;

top:104px;

bottom:0px;

left:0px;

right:0;

width: 100%;

margin-bottom:200px;

}

* html #container

{

top:0;

left:0;

right:0;

bottom:0px;

height:100%;

max-height:100%;

width:100%;

overflow:auto;

position:relative;

z-index:3;

}

#header {

position:absolute;

margin:0;

top:0;

left:0;

display:block;

width:100%;

height:100px;

z-index:5;

overflow:visible;

border-bottom: #ccc 4px solid;

padding:0px;

text-align:left;

}

</style>

</head>

<body >

<form id="form1" runat="server" >

<div id="container">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Vista" />

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Vista" />

<telerik:RadSplitter ID="RadSplitter1" runat="server" BorderSize="0" CssClass="radSplitter" Width="100%" Height="100%" >

<telerik:RadPane ID="LeftPane" runat="server" Width="180px" MaxWidth="300" >

<div id="leftColumnContent">

<h4>Logged in as:</h4>

<hr />

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="150" >

<Items>

<telerik:RadPanelItem Expanded="True" Text="Pending Items">

<Items>

<telerik:RadPanelItem Text="Pending Item 1" NavigateUrl="Error.aspx">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</div>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="RightPane" runat="server" Scrolling="Y" >

<div id="mainContent">

<asp:ContentPlaceHolder ID="MainContent" runat="server">

</asp:ContentPlaceHolder>

</div>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

<div id="header">

<table width="100%" border="0">

<tr>

<td>

<a href="/Default.aspx">

<img src="/Images/logo.png" width="138" height="66" vspace="10" /></a>

</td>

<td width="100%">

<table cellpadding="0" cellspacing="0" width="100%" border="0">

<tr>

<td>

<div style="float: right;">

<asp:TextBox ID="txtSearchBox" runat="server" Width="450" Enabled="false"></asp:TextBox>

<asp:Button ID="btnSearch" runat="server" Text="Search" Enabled="false" />

</div>

</td>

</tr>

<tr>

<td>

<div style="float: right; margin-top: 5px; border-top: 2px solid #ccc; width:100%;">

<div style="float: right; border:0px; margin:0px;">

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

</DIV>

</form>

</body>

2 Answers, 1 is accepted

answered on 10 Sep 2010, 10:44 AM

Hi Nicko,

You are correct in your observations and this is the property you should use. The problem comes from the fact that when you set the splitter to be 100% hight it actually becomes 100% of the page and the header also has some height - as a result the sum height is more than 100% and due to setting overflow hidden, the page is cut off with the size of the header.

You can find more detailed explanations in the article below:

http://www.telerik.com/support/kb/aspnet-ajax/splitter/making-radsplitter-occupy-part-of-a-page-with-variable-size.aspx

Greetings,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items