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

Height Attribute (100%)

9 Answers 243 Views

Editor

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

9 Answers, 1 is accepted

answered on 23 Oct 2009, 02:27 PM

Hi Carlos,

Please, note that RadEditor does not support height set in percents and to fit inside the available space of the parent element you should write javascript code that will set the Height of the editor control according to the height of the available space, e.g.

<div id="parentDIV" style="height: 700px;border: 3px solid red;">

<div id="innerDIV" style="height: 150px;border: 1px solid blue;"></div>

<telerik:radeditor runat="server" Width="100%" ID="RadEditor1" OnClientLoad="OnClientLoad">

<Modules>

<telerik:EditorModule Visible="false" />

</Modules>

</telerik:radeditor>

</div>

<script type="text/javascript">

function OnClientLoad(editor, args)

{

var parentElemHeight = parseInt($get("parentDIV").style.height);

var innerDIVHeight = parseInt($get("innerDIV").style.height);

var editorHeight = parentElemHeight - innerDIVHeight;

editor.get_element().style.height = editorHeight; //set the editor's wrapper height

editor.get_contentAreaElement().style.height = editorHeight - 80; //set the editor's iframe content area height

}

</script>

You can further enhance the solution to further fit in your exact scenario.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 16 Mar 2012, 07:16 AM

Hello,

Here is how I modified the provided aspx file so that the editor is rendered inside the DIV as expected:

<%@ 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">

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<style type="text/css">

html, form, body

{

height: 100%;

}

*

{

padding: 0px;

margin: 0px;

}

</style>

<title></title>

<script type="text/javascript">

function loadEditor(editor) {

//console.log(editor);

var l = editor.get_element();

l.style.minWidth = "";

l.style.minHeight = "";

l.style.border = "1px solid blue";

l.style.height = "100%";

var parentElemHeight = $get("edContainer").offsetHeight;

var editorToolbarHeight = $get(editor.get_id() + "Top").offsetHeight;

var iframeHeight = parentElemHeight - editorToolbarHeight - 30;

editor.get_contentAreaElement().style.height = iframeHeight;

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div id="edContainer" style="position: absolute; top: 200px; bottom: 0px; border: 1px solid red;">

<div style="position: relative; height: 100%; border: 1px solid #f00">

<asp:ScriptManager runat="server">

</asp:ScriptManager>

<telerik:RadEditor runat="server" ID="telEditor" OnClientLoad="loadEditor" EnableResize="false">

<Modules>

<telerik:EditorModule Visible="false" />

</Modules>

</telerik:RadEditor>

</div>

</form>

</body>

</html>

All the best,
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.