Server side RadSplitter height 100% not work

3 posts, 1 answers
  1. ChainHome Yang
    ChainHome Yang avatar
    11 posts
    Member since:
    Sep 2009

    Posted 07 Oct 2010 Link to this post

    Hi, Telerik:

        RadSplitter heigth 100% work fine on my develop environment, but when I deployed it to server, it worked nothing!

    What's wrong with my code?

    splitterInWindowX.aspx:

    01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="splitterInWindowX.aspx.cs" Inherits="__TEST__splitterInWindowX" %>
    02.  
    03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    04.  
    05.<html xmlns="http://www.w3.org/1999/xhtml">
    06.<head runat="server">
    07.    <title></title>
    08.    <style type="text/css">
    09.        .iframe      { width:100%; height:100%; overflow:hidden; }
    10.    </style>
    11.    <telerik:RadCodeBlock ID="_codeBlock" runat="server">
    12.        <script language="javascript" type="text/javascript">
    13.            // <Procedure | | >
    14.            function setIFrameHeight(oIFrame) {
    15.                try {
    16.                    var nHeight = 400;
    17.                    if (typeof window.innerHeight != 'undefined') { nHeight = window.innerHeight - 90; }
    18.                    else if (typeof document.documentElement != 'undefined') { nHeight = document.documentElement.clientHeight - 90; }
    19.                    if (oIFrame.style.heihgt != nHeight) oIFrame.style.height = nHeight;
    20.                }
    21.                catch (e) { window.status = e.Description; }
    22.            }
    23.            // <Event | | >
    24.            function bodyResize() { setIFrameHeight($get("iframeContent")); }
    25.        </script>
    26.    </telerik:RadCodeBlock>
    27.</head>
    28.<body onresize="bodyResize();">
    29.<form id="_frmSplitterInWindowX" runat="server">
    30.    <telerik:RadScriptManager ID="_managerScript" runat="server" />
    31.    <telerik:RadSkinManager   ID="_managerSkin"   runat="server" Skin="Web20" />
    32.    <div style="height:52px">
    33.        <telerik:RadMenu ID="_menubar" runat="server" />
    34.    </div>
    35.    <asp:Panel ID="_pnlIFrame" runat="server">
    36.        <iframe id="iframeContent" runat="server" class="iframe" frameborder="0" src="splitterInWindowM.aspx" />
    37.    </asp:Panel>
    38.</form>
    39.</body>
    40.</html>

    splitterInWindowMaspx:

    01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="splitterInWindowM.aspx.cs" Inherits="__TEST__splitterInWindowM" %>
    02.  
    03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    04.  
    05.<html xmlns="http://www.w3.org/1999/xhtml">
    06.<head runat="server">
    07.    <title></title>
    08.    <telerik:RadCodeBlock ID="_codeBlock" runat="server">
    09.        <script language="javascript" type="text/javascript">
    10.            function _btnPopup_OnClientClick() {
    11.                var oWin = radopen("./splitterInWindowD.aspx", "_windowSplitter");
    12.                oWin.maximize();
    13.                return false;
    14.            }
    15.        </script>
    16.    </telerik:RadCodeBlock>
    17.</head>
    18.<body>
    19.<form id="_frmSplitterInWindowM" runat="server">
    20.    <telerik:RadScriptManager ID="_managerScript" runat="server" />
    21.    <telerik:RadSkinManager   ID="_managerSkin"   runat="server" Skin="Black" />
    22.    <telerik:RadWindowManager ID="_managerWindow" runat="server" VisibleStatusbar="false">
    23.        <Windows>
    24.            <telerik:RadWindow ID="_windowSplitter" runat="server" />
    25.        </Windows>
    26.    </telerik:RadWindowManager>
    27.    <asp:Button ID="_btnPopup" runat="server" Text="popup" OnClientClick="return _btnPopup_OnClientClick();" />
    28.</form>
    29.</body>
    30.</html>

    splitterInWindowD.aspx:

    01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="splitterInWindowD.aspx.cs" Inherits="__TEST__splitterInWindowD" %>
    02.  
    03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    04.  
    05.<html xmlns="http://www.w3.org/1999/xhtml">
    06.<head runat="server">
    07.    <title></title>
    08.    <style type="text/css">
    09.        HTML, BODY, FORM { width:100%; height:100%; margin:0px; padding:0px; }
    10.        SPAN.rmText { font-size:12pt; }
    11.  
    12.        DIV.rspSlideTitle { font-size:12pt !important; }
    13.  
    14.        .paneEditItem  { position:relative; }
    15.        TABLE.editItem { width:100%; }
    16.        SPAN.eiTitle M { font-size:medium; width:80px; }
    17.        SPAN.eiTitle S { font-size:small; }
    18.  
    19.        LI.rcbItem, LI.rcbHovered, .rtbText, .RadListBox span.rlbText { font-size:12pt; }
    20.    </style>
    21.    <telerik:RadCodeBlock ID="_codeBlock" runat="server">
    22.        <script language="javascript" type="text/javascript">
    23.            function _editor_OnClientLoad(oSender, oArgs) { m_oEditor = oSender; _paneEditor_OnClientResized(); }
    24.            function _splitter_OnClientLoad(oSender, oArgs) { _paneEditor_OnClientResized(); }
    25.            function _paneEditor_OnClientResized(oSender, oArgs) {
    26.                var oPane = oSender ? oSender : $find("<%= _paneEditor.ClientID %>");
    27.                if (!oPane || !m_oEditor) return;
    28.                var nWidthEditor = parseInt(oPane.get_width()) - 5;
    29.                var nHeightEditor = parseInt(oPane.get_height()) - 5;
    30.                if (isNaN(nWidthEditor) || nWidthEditor < 0) nWidthEditor = 0;
    31.                if (isNaN(nHeightEditor) || nHeightEditor < 0) nHeightEditor = 0;
    32.                m_oEditor.setSize(nWidthEditor, nHeightEditor);
    33.            }
    34.        </script>
    35.    </telerik:RadCodeBlock>
    36.</head>
    37.<body>
    38.<form id="_frmSplitterInWindowD" runat="server">
    39.    <telerik:RadScriptManager ID="_managerScript" runat="server" />
    40.    <telerik:RadSkinManager   ID="_managerSkin"   runat="server" Skin="Windows7" />
    41.  
    42.    <div>
    43.        <telerik:RadSplitter ID="_splitterAll" runat="server" Width="100%" Height="100%" OnClientLoad="_splitter_OnClientLoad" Orientation="Horizontal">
    44.            <telerik:RadPane ID="_pane2Bar" runat="server" Height="58" MaxHeight="58" MinHeight="58" Scrolling="None">
    45.                <telerik:RadToolBar ID="_toolbar" runat="server" Width="100%" />
    46.                <telerik:RadMenu    ID="_menubar" runat="server" Width="100%" />
    47.            </telerik:RadPane>
    48.  
    49.  
    50.            <telerik:RadSplitBar ID="_splitbarMenu" runat="server" EnableResize="false" />
    51.  
    52.  
    53.            <telerik:RadPane ID="_paneMaster" runat="server">
    54.                <telerik:RadSplitter ID="_splitterMaster" runat="server" Orientation="Vertical">
    55.                    <telerik:RadPane ID="_paneLeft" runat="server" Width="22" Height="100%">
    56.                        <telerik:RadSlidingZone ID="_zoneSlidingLeft" runat="server" SlideDirection="Right">
    57.                            <telerik:RadSlidingPane id="_paneSlidingLeft" runat="server" Title="Info" Width="420" CssClass="paneEditItem" Scrolling="Both" DockOnOpen="true">
    58.                            </telerik:RadSlidingPane>
    59.                        </telerik:RadSlidingZone>
    60.                    </telerik:RadPane>
    61.                    <telerik:RadSplitBar ID="_splitbarLeft"  runat="server" />
    62.  
    63.  
    64.                    <telerik:RadPane ID="_paneEditor" runat="server" Height="100%" OnClientResized="_paneEditor_OnClientResized">
    65.                        <telerik:RadEditor ID="_editor" runat="server" EditModes="Design" Width="99%" Height="99%"
    66.                                OnClientLoad="_editor_OnClientLoad">
    67.                            <Content></Content>
    68.                            <Modules>
    69.                                <telerik:EditorModule Visible="false" />
    70.                            </Modules>
    71.                        </telerik:RadEditor>
    72.                    </telerik:RadPane>
    73.                </telerik:RadSplitter>
    74.            </telerik:RadPane>
    75.        </telerik:RadSplitter>
    76.    </div>
    77.</form>
    78.</body>
    79.</html>

  2. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 13 Oct 2010 Link to this post

    Hi ChainHome,

    To configure RadSplitter having 100% height you need to make sure that all its parent elements have set height value. In the provided pages I noticed the following errors:
    1. The direct parent of RadSplitter does not have set height:
      42.    <div>
      43.        <telerik:RadSplitter ID="_splitterAll" runat="server" Width="100%" Height="100%" OnClientLoad="_splitter_OnClientLoad" Orientation="Horizontal">
    2. the direct parent of the <iframe> does not have set height, thus the <iframe> height set to 100% through the CSS class will not be applied correctly:
      35.    <asp:Panel ID="_pnlIFrame" runat="server">
      36.        <iframe id="iframeContent" runat="server" class="iframe" frameborder="0" src="splitterInWindowM.aspx" />
      37.    </asp:Panel>

    Could you fix this errors and see if the problem still occurs?

    Greetings,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ChainHome Yang
    ChainHome Yang avatar
    11 posts
    Member since:
    Sep 2009

    Posted 13 Oct 2010 Link to this post

    Thanks Telerik,

    I had removed the RadSplitter parent element 'div', and it worked fine!

Back to Top