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

2 posts, 0 answers
  1. Golden
    Golden avatar
    2 posts
    Member since:
    Sep 2008

    Posted 03 Sep 2008 Link to this post

    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>

  2. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 05 Sep 2008 Link to this post

    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.
Back to Top