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

Resizing a docked sliding pane causes display issues on IE & FF

1 Answer 104 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Golden
Top achievements
Rank 1
Golden asked on 03 Sep 2008, 06:35 PM

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>

1 Answer, 1 is accepted

Sort by
0
Sophy
Telerik team
answered on 05 Sep 2008, 11:02 AM
Hi Golden,

The problem in IE is due to the Scrolling="Y" you have set to the RadPane. If you remove it the problem will disappear. Regarding the issue in FF, it is result of the sliding pane's height not being correctly calculated. We will further consider this issue and will do our best to fix it for one of the next updates of the control. For the time being I suggest you the following workaround:
<script language="javascript">  
    function SetHeight(height) {  
        var splitter = $find('<%=RadSplitter1.ClientID %>');  
        splitter.set_height(height);  
        var slidingZoneEl = $get("<%= RadSlidingZone1.ClientID %>");  
        slidingZoneEl.getElementsByTagName('div')[1].style.height = (height - 2) + "px";  
        var slidingZone = $find("<%= RadSlidingZone1.ClientID %>");  
        var slidingPane = slidingZone.getPaneById('Pane1');   
        slidingPane.getContentContainer().style.height = (height - 40)+"px";  
    }  
</script> 
You will need to set the correct height to the elements which have not been correctly resized. Note that you will also need to either remove the asp panel you have added in the RadPane and have placed the sliding zone in it or set its height property to "100%" so that it is resized correctly when resizing the splitter and docking/undocking the sliding pane. For your convenience I have attached a modified version of your page demonstrating the above workaround.

Another option to resolve the problem is to set the height of the splitter in pixels or leave it in 100% but add the following style between the head tags of the page so that the splitter takes 100% of the browser window:
<style type="text/css">  
    html, body, form  
    {  
        height: 100%;  
        overflowhidden;  
        margin0px;  
        padding0px;  
    }  
</style>  
 
Note that in this case you will also need to add height 100% to the div with id="page" as it is also parent element of the splitter.
Let us know if you need further assistance.

Kind regards,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Splitter
Asked by
Golden
Top achievements
Rank 1
Answers by
Sophy
Telerik team
Share this question
or