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> </telerik:RadSplitter> </div> <!-- end of container --> <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> </div> </td> </tr> </table> </td> </tr> </table> <!-- end #header --> </DIV> </form> </body>2 Answers, 1 is accepted
0
Nicko
Top achievements
Rank 1
Rank 1
answered on 07 Sep 2010, 08:11 PM
I figured it out. You need to set the HeightOffset
property to whatever the width is of your fixed header.0
Hi Nicko,
Svetlina
the Telerik team
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
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