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

Body's Height in IFrame with RadEditor Customize Content Area

1 Answer 253 Views

Editor

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

gzzn asked on 29 May 2012, 10:15 PM

editorcustomercontentarea.jpg

1.index.aspx



<!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">

<title>WebForm Editor Customize Content Area</title>

<style type="text/css">html, body, form { height:100%; margin:0px; padding:0px; }</style>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function OnClientLoaded() {

var pane = $find("<%=RadSplitter1.ClientID%>");

var editor = $find("<%=RadEditor1.ClientID %>");

var newHeight = pane.get_height();

var newWidth = pane.get_width()-4;

editor.setSize(newWidth, newHeight);

}

</script>

</telerik:RadCodeBlock>

<telerik:RadSplitter ID="RadSplitter1" runat="server" VisibleDuringInit="false" Width="100%" Height="100%" OnClientLoaded="OnClientLoaded" OnClientResized="OnClientLoaded">

<telerik:RadPane ID="RadPane1" runat="server" Scrolling="None">

<telerik:RadEditor ID="RadEditor1" runat="server" NewLineMode="P" Width="100%" Height="100%" ContentAreaMode="Iframe" style="display:inline-block;"

ContentAreaCssFile="~/css/EditorContentAreaStyles.css">

<Modules>

<telerik:EditorModule Name="RadEditorDomInspector" Enabled="false" />

<telerik:EditorModule Name="RadEditorHtmlInspector" Enabled="false" />

<telerik:EditorModule Name="RadEditorNodeInspector" Enabled="false" />

<telerik:EditorModule Name="RadEditorStatistics" Enabled="false" />

<telerik:EditorModule Name="RadEditorTrackChangesInfo" Enabled="false" />

</Modules>

<Content></Content>

</telerik:RadEditor>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>



2.EditorContentAreaStyles.css



html {

background-color: #555 !important

; }

body {

background-color: #FFFFFF !important; margin: 20px !important; padding: 20px !important

; }

Problem:

in index.aspx file, when html, body, form { height:100% }, and Radeditor1's ContentAreaCssFile: EditorContentAreaStyles.css, its height will be inherited as default value from index.aspx.
so in iframe, body's height is less than length of the text in editor.
when i remove height:100% from index.aspx, it work fine.
thanks.

Body's Height in IFrame with RadEditor Customize Content Area

1 Answer, 1 is accepted