There is a RadSlidingPane that is docked initially when the application start.
The Splitter Height is set to 100% to allow dynamic resizes during page load or RadAjax response.
There is a RESIZE link to resize the splitter height based on certain value.
There are two things happened after the resize:
1. On IE 7, it causes a vertical bar to appear
2. On Firefox 2.0.0.16, the Sliding Pane height is overlap beyond it's containing splitter
The code below is the sample POC. I would really appreciate any help to solve the problems above.
The telerik version used is: 2008.2.826.35
Environment: VS 2008 with .NET Framework 3.5
<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SlidingPaneTest._Default" %>
<%
@ 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 runat="server">
<title></title>
</
head>
<
body>
<script language="javascript">
function SetHeight(height) {
var splitter = $find('<%=RadSplitter1.ClientID %>');
splitter.set_height(height);
}
</script>
<form id="form1" runat="server">
<div id="page">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Outlook" Orientation="Vertical"
ResizeMode="EndPane" LiveResize="false" Width="100%" Height="100%">
<telerik:RadPane ID="RadLeftPane" runat="server" Width="150" Scrolling="Y">
<asp:Panel ID="panelLeftPane" runat="server">
<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="20" DockedPaneId="Pane1">
<telerik:RadSlidingPane ID="Pane1" Title="My Title 1" runat="server" Width="150"
EnableResize="true" EnableDock="true">
Test
<br />
Test
<br />
Test
<br />
Test
<br />
Test
<br />
Test
<br />
Test
<br />
Test
<br />
Test
<br />
Test
<br />
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</asp:Panel>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Visible="false" />
<telerik:RadPane ID="RadRightPane" runat="server" Scrolling="Both">
</telerik:RadPane>
</telerik:RadSplitter>
<a href="javascript:SetHeight(500);">RESIZE</a>
</div>
</form>
</
body>