Body's Height in IFrame with RadEditor Customize Content Area

2 posts, 0 answers
  1. gzzn
    gzzn avatar
    12 posts
    Member since:
    Jan 2011

    Posted 29 May 2012 Link to this post

    1.index.aspx

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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.
  2. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 01 Jun 2012 Link to this post

    Hello,

    To fix the appearance problem in the content area set the CssFiles property of RadEditor to point to an empty css file. You can find more information in this help article: Content Area Appearance Problems.

    Kind 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.
Back to Top