The splitter is working well, but there is one thing I am not sure how to do. I am using the 100% height technique, a footer, a header, left pane, right pane. I created a treeview in the left pane and right pane windows. When the treeview expands out, it creates a scroll bar for both panes. If I turn scrolling off on the pane, the treeview then is hidden behind the footer. Is it possible for when either pane has content that expands beyond the available height that the footer gets pushed down and the browser scroll appears instead of the pane scroll. I like how it works now that the footer sticks to the bottom of the browser window, even when you resize by using the splitters offset property, but I want the footer to get pushed down when the left, or right when the content expands.
I've seen this work using div tags, but am not sure how to do it with the rad splitter. Below is code containing what I described above.
Thanks,
Risso
I've seen this work using div tags, but am not sure how to do it with the rad splitter. Below is code containing what I described above.
Thanks,
Risso
<%@ 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" > |
<head id="Head1" runat="server"> |
<title>Untitled Page</title> |
<style type="text/css"> |
html, body, form |
{ |
height: 100%; |
overflow: hidden; |
margin: 0px; |
padding: 0px; |
} |
</style> |
</head> |
<body> |
<form id="form1" runat="server"> |
<asp:ScriptManager ID="ScriptManager1" runat="server" /> |
<div id="header" style="height:100px;background-color:Gray;">Header</div> |
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" |
HeightOffset="200"> |
<telerik:RadPane ID="RadPane1" runat="server" BackColor="LightBlue" Width="215" > |
<asp:TreeView ID="TreeView1" runat="server"> |
<Nodes> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</Nodes> |
</asp:TreeView> |
</telerik:RadPane> |
<telerik:RadSplitBar ID="RadPaneSplitBar1" runat="server" CollapseMode="forward" /> |
<telerik:RadPane ID="RadPane2" runat="server" BackColor="green"> |
<asp:TreeView ID="TreeView2" runat="server"> |
<Nodes> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</asp:TreeNode> |
</asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode> |
</Nodes> |
</asp:TreeView> |
</telerik:RadPane> |
</telerik:RadSplitter> |
<div id="footer" style="height:100px;background-color:Gray;">Footer</div> |
</form> |
</body> |
</html> |