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

How to set editor height to 100%?

5 Answers 392 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 11 Feb 2013, 02:44 PM
I cannot seem to figure out how to do this. By default the editor is only occupying about 50% of the pane.

I have tried to follow the most recent example I could find of how to do this: http://www.telerik.com/community/forums/aspnet-ajax/editor/rad-editor-height-problem.aspx

But I am having problems when attempting to retrieve the pane height.

Here is my code for the javascript function:
function OnClientLoad(editor) {
                //sets the height of the radeditor to the height of the pane
                var paneHeight = $get("<%=paneBottom.ClientID %>").style.height;
                alert(paneHeight);
                editor.get_element().style.height = paneHeight;
            }

The alert window that pops up for the pane height has nothing in it.

And here is the pane with the radeditor inside of it:
<radspl:RadPane runat="server" ID="paneBottom" Scrolling="none" CssClass="RadEToolbar">
    <radE:RadEditor runat="server" ID="editor" Width="100%"  EnableDocking="false" Skin="Telerik"  ShowPreviewMode="false" CssFiles="~/Css/public_page.css" StripAbsoluteAnchorPaths="true" StripAbsoluteImagesPaths="true" AnchorPathToStrip="http://localhost:8080" ImagesPathToStrip="http://localhost:8080" ToolsFile="ToolsFile.xml" OnClientLoad="OnClientLoad"/>
</radspl:RadPane>



5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 11 Feb 2013, 02:51 PM
Hello,

Here is an example, which demonstrates how to get reference to parent element of RadEditor and apply this size to the RadEditor's div wrapper element and its content area:

Copy Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="TelerikTest.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">
<head runat="server">
<title></title>
<style type="text/css">
html,body,form
{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="ScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadSplitter runat="Server" ID="RadSplitter2" Width="100%" BorderSize="0"
BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal"
VisibleDuringInit="true">
<telerik:RadPane ID="topPaneMenu" runat="server" Height="50px">
</telerik:RadPane>
<telerik:RadPane Height="400px"
runat="server" ID="contentPane" BackColor="ActiveBorder">
<telerik:RadEditor runat="server" EditModes="Design" ID="RadEditor1" OnClientLoad="OnClientLoad" Width="99%">
<Modules>
<telerik:EditorModule Visible="false" />
</Modules>
</telerik:RadEditor>
<script type="text/javascript">
function OnClientLoad(editor) {
  setTimeout(function () {
    $get("RAD_SPLITTER_PANE_CONTENT_contentPane").style.border = "1px solid red";
    var paneHeight = $get("RAD_SPLITTER_PANE_CONTENT_contentPane").style.height;
    editor.get_element().style.height = (parseInt(paneHeight) - 4) + "px";
    editor.get_contentAreaElement().style.height = (parseInt(paneHeight) - 60) + "px";
  }, 10);
}
</script>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>



Regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ryan
Top achievements
Rank 1
answered on 11 Feb 2013, 03:12 PM
Thank you for the quick response.

I have already set the html, body, and form styles to the highlighted styles. The paneHeight is not being retreived properly.

I have changed my javascript to the following code:

function OnClientLoad(editor) {
    //sets the height of the radeditor to the height of the pane
    var paneHeight = $get("<%=paneBottom.ClientID %>").style.height;
    alert(paneHeight);
    editor.get_element().style.height = (parseInt(paneHeight) - 4) + "px";
    editor.getContentAreaElement().style.height = (parseInt(paneHeight) - 60) + "px";
}

But it only results in an additional invalid argument error on the bolded line. The alert window with paneHeight is still blank.

I have also tried changing the paneHeight to this:
    var paneHeight = $get("RAD_SPLITTER_PANE_CONTENT_paneBottom").style.height;
But I get an error for that line: Unable to get value of the property 'style': object is null or undefined.


0
Rumen
Telerik team
answered on 14 Feb 2013, 07:45 AM
Hello,

Does this $get("<%=paneBottom.ClientID %>") code is resolved to the correct ID which gives a reference to the RadPane client object?

If you see my example I am using the resolved panel ID taken from the page's HTML source.

$get("RAD_SPLITTER_PANE_CONTENT_contentPane")

but not $get("<%=contentPane.ClientID %>")and this works on my end.

If you are unable to fix the problem, just open a support ticket and send a simple working project which demonstrates it. I will examine it and provide a solution.

Best regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ryan
Top achievements
Rank 1
answered on 15 Feb 2013, 01:32 PM
The server tag I used resolves to the following ID: ctl00_ContentPlaceHolder1_paneBottom

I looked in the source to find one more similar to what you had, and foud this : RAD_SPLITTER_PANE_CONTENT_ctl00_ContentPlaceHolder1_paneBottom

So I used it to get the paneheight:
function OnClientLoad(editor) {
                //sets the height of the radeditor to the height of the pane
                //var paneHeight = $get("<%=paneBottom.ClientID %>").style.height;
                var paneHeight = $get("RAD_SPLITTER_PANE_CONTENT_ctl00_ContentPlaceHolder1_paneBottom").style.height;
                alert(paneHeight);
                editor.get_element().style.height = (parseInt(paneHeight) - 4) + "px";
                //editor.getContentAreaElement().style.height = (parseInt(paneHeight) - 60) + "px";
                editor.get_element().style.height = paneHeight;
            }


But it only resolves to 331px. I will try to create a working project and submit a support ticket if you do not see anything obvious that is wrong here.
0
Rumen
Telerik team
answered on 20 Feb 2013, 07:22 AM
Hello,

Yes, it is a good idea to isolate the problem in a sample working project so that we can debug it locally and see why the height is resolved to 331px.

Regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Editor
Asked by
Ryan
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Ryan
Top achievements
Rank 1
Share this question
or