Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Server side RadSplitter height 100% not work

2 Answers 114 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
ChainHome Yang
Top achievements
Rank 1
ChainHome Yang asked on 08 Oct 2010, 02:42 AM
splitter-server.jpg
splitter-local.jpg

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 Answers, 1 is accepted

Sort by
0
Accepted
Dobromir
Telerik team
answered on 13 Oct 2010, 09:03 AM
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
0
ChainHome Yang
Top achievements
Rank 1
answered on 14 Oct 2010, 02:35 AM

Thanks Telerik,

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

Tags
Splitter
Asked by
ChainHome Yang
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
ChainHome Yang
Top achievements
Rank 1
Share this question
or