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

Resizes on collapse, but not on expand

1 Answer 104 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Bailey Everitt
Top achievements
Rank 1
Bailey Everitt asked on 20 Dec 2008, 06:40 PM
Hi everyone,

I have a base page, that contains a header, footer, TreeView in the left panel, and a right panel where all the pages are loaded into when the user clicks on a node.

When a page is loaded in the right panel, and I collapse/resize the TreeView panel (to the left), the controls in the right panel (grid mainly) resize fine.  However, when I then expand/resize the TreeView panel (to the right), the controls do not get resized back to what they originally were.  I've included my base page and the page that I'm loading in the right panel below.  Any help is appreciated!

Base Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TRMS.aspx.cs" Inherits="Web.TRMS" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<link href="UIComponents/TreeView/Web20/TreeView.Web20.css" rel="stylesheet" type="text/css" /> 
<!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>ROSS Rewrite</title> 
 
    <script type="text/javascript" src="JavaScript/LoadPage.js"></script> 
 
    <style type="text/css"
        html, body, form 
        { 
            height: 100%; 
            padding: 0px; 
            margin: 0px; 
        } 
        .header 
        { 
            height: 70px; 
            border-bottom: 1px black; 
        } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"
    <telerik:RadScriptManager ID="uxRadScriptManager" runat="server" /> 
    <telerik:RadFormDecorator ID="uxRadFormDecorator" Runat="server" Skin="Web20" /> 
    <div id="header"
        <asp:Image ID="uxImageTLogo" runat="server" ImageUrl="~/UIComponents/Images/T_logo.jpg" /> 
        <asp:Image ID="uxImageMBCRLogo" runat="server" ImageUrl="~/UIComponents/Images/MBCR_logo.jpg" /> 
    </div> 
    <telerik:RadSplitter ID="uxRadSplitter" runat="server" LiveResize="True" Skin="Inox" 
        Height="100%" Width="99.9%" HeightOffset="190" SplitBarsSize=""  
        VisibleDuringInit="False"
        <telerik:RadPane ID="uxRadPaneLeft" runat="server" Height="17px" Width="250px" MaxWidth="400" 
            MinWidth="200"
            <telerik:RadTreeView ID="uxRadTreeView" runat="server" LoadingMessage="" OnClientNodeClicked="ClientNodeClicked" 
                Skin="Web20" OnNodeExpand="uxRadTreeView_NodeExpand" Font-Size="X-Small" EnableEmbeddedSkins="False" 
                Font-Names="Calibri"
                <CollapseAnimation Duration="400" Type="InQuart" /> 
                <ExpandAnimation Duration="400" /> 
            </telerik:RadTreeView> 
        </telerik:RadPane> 
        <telerik:RadSplitBar ID="uxRadSplitBar" runat="server" CollapseMode="Forward" /> 
        <telerik:RadPane ID="uxRadPaneRight" runat="server" ContentUrl="about:blank" Height="100%"
        </telerik:RadPane> 
    </telerik:RadSplitter> 
    <div id="footer" style="height: 20px; border-top: 1px black;"
    </div> 
    </form> 
</body> 
</html> 
 

Page I'm loading in the right panel:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Trips.aspx.cs" Inherits="Web.Trips" %> 
 
<%@ 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> 
    <telerik:RadCodeBlock ID="uxRadCodeBlock" runat="server"
        <style type = "text/css"
        .RadPicker_WebBlue 
        { 
            vertical-align: middle; 
        } 
        .RadPicker_WebBlue .rcInputCell 
        { 
            padding: 0 4px 0 0; 
        } 
        .RadInput_Default 
        { 
            font: 12px arial,sans-serif; 
        } 
        .RadInput_Default 
        { 
            vertical-align: middle; 
        } 
        .RadPicker_WebBlue .rcCalPopup 
        { 
            background-position: 0 -200px; 
        } 
        .RadPicker_WebBlue td a 
        { 
            display: block; 
            overflow: hidden; 
            position: relative; /*FF*/ 
            outline: none; /*FF*/ 
            z-index: 2; /*Opera*/ 
            width: 16px; 
            height: 16px; 
            margin: 0 2px; 
            background: url(                    'mvwres://Telerik.Web.UI, Version=2008.3.1125.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.WebBlue.Calendar.sprite.gif' ) no-repeat; 
            text-indent: -1111px; 
            text-align: center; 
            text-decoration: none; 
        } 
        .filterControls 
        { 
            font-family: Calibri; 
            font-size: medium; 
            padding: 5px; 
        } 
        .tripDetailsTop 
        { 
            font-family: Calibri; 
            margin-left: auto; 
            margin-right: auto; 
        } 
        .tripDetailsNested 
        { 
            font-family: Calibri; 
            border: 1px solid #333; 
        } 
        html, body, form 
        { 
            height: 100%; 
            padding: 0px; 
            margin: 0px; 
            overflow: hidden; 
        } 
        .filterColumns 
        { 
            width: 1%; 
            white-space: nowrap; 
        } 
         
 
        </style> 
     
    <script type="text/javascript"
   function centerUpdatePanel() 
   { 
        centerElementOnScreen(document.getElementById("uxRadAjaxLoadingPanel")); 
   } 
   function centerElementOnScreen(element) 
   { 
        var scrollTop = document.body.scrollTop; 
        var scrollLeft = document.body.scrollLeft; 
        var viewPortHeight = document.body.clientHeight; 
        var viewPortWidth = document.body.clientWidth; 
        if (document.compatMode == "CSS1Compat") 
        { 
         viewPortHeight = document.documentElement.clientHeight; 
         viewPortWidth = document.documentElement.clientWidth; 
         scrollTop = document.documentElement.scrollTop; 
         scrollLeft = document.documentElement.scrollLeft; 
        } 
        var topOffset = Math.ceil(viewPortHeight/2 - element.offsetHeight/2); 
        var leftOffset = Math.ceil(viewPortWidth/2 - element.offsetWidth/2); 
        var top = scrollTop + topOffset - 40; 
        var left = scrollLeft + leftOffset - 70; 
           element.style.position = "absolute"
        element.style.top = top + "px"; 
        element.style.left = left + "px"; 
    } 
    function RowSelected(sender, eventArgs) 
    { 
        var dataItem = $get(eventArgs.get_id()); 
        var grid = sender
        var MasterTable = grid.get_masterTableView(); 
        var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()]; 
        var cell = MasterTable.getCellByColumnUniqueName(row, "PrimaryKey"); 
        alert(cell); 
    } 
    </script> 
    </telerik:RadCodeBlock> 
</head> 
<body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager" runat="server"
    </asp:ScriptManager> 
    <telerik:RadAjaxLoadingPanel IsSticky="true" ID="uxRadAjaxLoadingPanel" runat="server" 
        Height="75px" Width="75px"
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' 
            style="border: 0px;" /> 
    </telerik:RadAjaxLoadingPanel> 
    <telerik:RadFormDecorator ID="uxRadFormDecorator" runat="server" Skin="Web20" /> 
    <telerik:RadWindowManager ID="uxRadWindowManager" runat="server" Skin="Web20"
    </telerik:RadWindowManager> 
    <telerik:RadSplitter ID="uxRadSplitter" runat="server" LiveResize="True" Skin="Inox" 
        Height="100%" Width="100%" SplitBarsSize="5px" BorderSize="0" BorderStyle="None" 
        Orientation="Horizontal" FullScreenMode="True" PanesBorderSize="0"  
        VisibleDuringInit="False"
        <telerik:RadPane ID="uxRadPaneFilter" runat="server" Height="3%" Width="" MaxWidth="400" 
            MinWidth="200" MaxHeight="0" Scrolling="None" MinHeight="0"
            <telerik:RadSlidingZone ID="uxRadSlidingZone" runat="server" ClickToOpen="True"
                <telerik:RadSlidingPane ID="uxRadSlidingPanel" runat="server" IconUrl="UIComponents/Images/filter.gif" 
                    Title="Filter" CssClass="filterControls" Height="350px" Scrolling="None" BackColor="White"
                    <div class="filterControls"
                        <table cellpadding="0" cellspacing="5" width="100%"
                            <tr> 
                                <td class="filterColumns"
                                    Trips Dates: 
                                </td> 
                                <td class="filterColumns"
                                    <telerik:RadDatePicker ID="uxRadDatePickerFrom" runat="server" Skin="WebBlue"  
                                        Culture="English (United States)"
                                        <Calendar runat="server" Skin="WebBlue" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" 
                                            ViewSelectorText="x" ShowRowHeaders="False"
                                        </Calendar> 
                                        <DatePopupButton HoverImageUrl="" ImageUrl="" /> 
                                    </telerik:RadDatePicker> 
                                    &#160; To&#160; 
                                    <telerik:RadDatePicker ID="uxRadDatePickerTo" runat="server" Skin="WebBlue"  
                                        Culture="English (United States)"
                                        <Calendar runat="server" Skin="WebBlue" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" 
                                            ViewSelectorText="x" ShowRowHeaders="False"
                                        </Calendar> 
                                        <DatePopupButton HoverImageUrl="" ImageUrl="" /> 
                                    </telerik:RadDatePicker> 
                                </td> 
                                <td> 
                                    &#160;&#160; 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    Division: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxDivision" runat="server" Skin="WebBlue" Width="330px"
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearDivision" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    Route: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxRoute" runat="server" Skin="WebBlue" Width="330px"
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearRoute" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    Direction: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxDirection" runat="server" Skin="WebBlue" Width="330px"
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearDirection" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    Trip Status: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxTripStatus" runat="server" Skin="WebBlue" Width="330px"
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearTripStatus" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    Origin: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxOrigin" runat="server" Skin="WebBlue" Width="330px"
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearOrigin" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    Destination: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxDestination" runat="server" Skin="WebBlue" 
                                        Width="330px"
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearDestination" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    Train #: 
                                </td> 
                                <td> 
                                    <telerik:RadComboBox ID="uxRadComboBoxTrainNumber" runat="server" Skin="WebBlue" 
                                        Width="330px"
                                        <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                    </telerik:RadComboBox> 
                                </td> 
                                <td> 
                                    <asp:Button ID="uxButtonClearTrainNumber" runat="server" Text="Clear" /> 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    &#160;&#160; 
                                </td> 
                                <td> 
                                    <asp:RadioButtonList ID="uxOptRevenueType" runat="server" RepeatDirection="Horizontal"
                                        <asp:ListItem Selected="True">Revenue</asp:ListItem> 
                                        <asp:ListItem>Non-Revenue</asp:ListItem> 
                                        <asp:ListItem>Both</asp:ListItem> 
                                    </asp:RadioButtonList> 
                                </td> 
                                <td> 
                                    &#160;&#160; 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    &#160; 
                                </td> 
                                <td> 
                                    &#160; 
                                </td> 
                                <td> 
                                    &#160; 
                                </td> 
                            </tr> 
                            <tr> 
                                <td class="filterColumns"
                                    &#160; 
                                </td> 
                                <td> 
                                    &#160;<asp:Button ID="uxButtonOK" runat="server" OnClick="uxButtonOK_Click" Text="OK" /> 
                                    &#160;&#160; 
                                    <asp:Button ID="uxButtonNew" runat="server" Text="New" OnClick="uxButtonNew_Click" /> 
                                    &#160;&#160; 
                                    <asp:Button ID="uxButtonClearFilter" runat="server" Text="Clear" /> 
                                </td> 
                                <td> 
                                    &#160; 
                                </td> 
                            </tr> 
                        </table> 
                    </div> 
                </telerik:RadSlidingPane> 
            </telerik:RadSlidingZone></telerik:RadPane> 
            <telerik:RadSplitBar ID="uxRadSplitBarFilter" runat="server"  
            CollapseExpandPaneText="" EnableResize="False" /> 
        <telerik:RadPane ID="uxRadPaneList" runat="server" Height=""  
            BorderStyle="None"
            <telerik:RadGrid ID="uxRadGridList" style="border: 0; outline: none" runat="server" GridLines="None" Skin="WebBlue" 
                AllowSorting="True" OnColumnCreated="uxRadGridList_ColumnCreated" OnNeedDataSource="uxRadGridList_NeedDataSource" 
                Height="100%" Width="100%" OnItemCommand="uxRadGridList_ItemCommand"
                <HeaderContextMenu EnableTheming="True"
                    <CollapseAnimation Duration="200" Type="OutQuint" /> 
                </HeaderContextMenu> 
                <MasterTableView> 
                    <RowIndicatorColumn> 
                        <HeaderStyle Width="20px" /> 
                    </RowIndicatorColumn> 
                    <ExpandCollapseColumn> 
                        <HeaderStyle Width="20px" /> 
                    </ExpandCollapseColumn> 
                </MasterTableView><ClientSettings EnablePostBackOnRowClick="True"
                    <Selecting AllowRowSelect="True" /> 
                    <Scrolling AllowScroll="True" /> 
                </ClientSettings> 
                <FilterMenu EnableTheming="True"
                    <CollapseAnimation Duration="200" Type="OutQuint" /> 
                </FilterMenu> 
            </telerik:RadGrid></telerik:RadPane> 
        <telerik:RadSplitBar ID="uxRadSplitBarListDetail" runat="server" CollapseExpandPaneText="" /> 
        <telerik:RadPane ID="uxRadPaneDetail" runat="server" Height="50%" Scrolling="Y"
            <asp:Panel ID="uxAspPanel" runat="server"
                <table cellpadding="0" cellspacing="10" class="tripDetailsTop"
                    <tr> 
                        <td> 
                            <table cellpadding="0" cellspacing="10" class="tripDetailsNested"
                                <tr> 
                                    <td> 
                                        Train # 
                                    </td> 
                                    <td> 
                                        Date 
                                    </td> 
                                    <td> 
                                        Route 
                                    </td> 
                                    <td> 
                                        Direction 
                                    </td> 
                                    <td> 
                                        Schedule Type 
                                    </td> 
                                    <td> 
                                        Peak Type 
                                    </td> 
                                    <td> 
                                        Non-Revenue 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td> 
                                        <telerik:RadTextBox ID="uxRadTextBoxTrainNumberDetails" runat="server" Skin="WebBlue"
                                        </telerik:RadTextBox> 
                                    </td> 
                                    <td> 
                                        <telerik:RadTextBox ID="uxRadTextBoxTripDateDetails" runat="server" Skin="WebBlue"
                                        </telerik:RadTextBox> 
                                    </td> 
                                    <td> 
                                        <telerik:RadComboBox ID="uxRadComboBoxRouteDetails" runat="server" Skin="WebBlue"
                                            <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                        </telerik:RadComboBox> 
                                    </td> 
                                    <td> 
                                        <telerik:RadComboBox ID="uxRadCombBoxDirectioDetailsn" runat="server" Skin="WebBlue"
                                            <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                        </telerik:RadComboBox> 
                                    </td> 
                                    <td> 
                                        <telerik:RadComboBox ID="uxRadComboScheduleTypeDetails" runat="server" Skin="WebBlue"
                                            <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                        </telerik:RadComboBox> 
                                    </td> 
                                    <td> 
                                        <telerik:RadComboBox ID="uxRadComboBoxPeakTypeDetails" runat="server" Skin="WebBlue"
                                            <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                        </telerik:RadComboBox> 
                                    </td> 
                                    <td align="center"
                                        <asp:CheckBox ID="uxChkNonRevenue" runat="server" /> 
                                    </td> 
                                </tr> 
                            </table> 
                        </td> 
                    </tr> 
                </table> 
            </asp:Panel> 
        </telerik:RadPane> 
    </telerik:RadSplitter> 
    <telerik:RadAjaxManager runat="server"  
        ClientEvents-OnRequestStart="centerUpdatePanel();" ID="uxRadAjaxManager" > 
        <ClientEvents OnRequestStart="centerUpdatePanel();"></ClientEvents> 
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="uxButtonOK"
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="uxRadGridList" LoadingPanelID="uxRadAjaxLoadingPanel" /> 
                    <telerik:AjaxUpdatedControl ControlID="uxAspPanel"  
                        LoadingPanelID="uxRadAjaxLoadingPanel" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
            <telerik:AjaxSetting AjaxControlID="uxButtonNew"
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="uxAspPanel"  
                        LoadingPanelID="uxRadAjaxLoadingPanel" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
            <telerik:AjaxSetting AjaxControlID="uxRadGridList"
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="uxRadGridList"  
                        LoadingPanelID="uxRadAjaxLoadingPanel" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManager> 
    </form> 
</body> 
</html> 
 

1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetie
Telerik team
answered on 23 Dec 2008, 07:50 AM
Hi Matthew,
Please add the following style to the HEAD of your Trips page:
html, body, form    
{    
    height: 100%;   
    width:100%;   
    padding0px;    
    margin0px;    
    overflowhidden;    
}  

, and remove the FullScreenMode property from the definition of your uxRadSplitter control.

I have attached my test pages for your reference.

Greetings,
Tsvetie
the Telerik team

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