Filling the container

[Stuart Hemming]

I want my RadEditor to fill the container it's in so I set the Width and Height properties to 100%.

When the page renders the width is set as expected but the height seems to being rendered as 100px rather than 100%. You should be able to see what I mean from the attached screenshot. The markup is shown below...

<telerik:RadEditor ID="edtHistory"
                   runat="server"
                   EnableResize="false"
                   ContentAreaMode="Div"
                   EditModes="Preview"
                   Height="100%"
                   NewLineBr="false"
                   Width="100%">
    <CssFiles>
        <telerik:EditorCssFile Value="~/App_Themes/Default/Default.css" />
    </CssFiles>
    <Modules>
        <telerik:EditorModule Name="RadEditorStatistics" Enabled="false" Visible="false" />
        <telerik:EditorModule Name="RadEditorDomInspector" Enabled="false" Visible="false" />
        <telerik:EditorModule Name="RadEditorHtmlInspector" Enabled="false" Visible="false" />
        <telerik:EditorModule Name="RadEditorNodeInspector" Enabled="false" Visible="false" />
    </Modules>
</telerik:RadEditor>

FYI, I'm using Q2 2010.

-- 
Stuart

[Stuart Hemming]

Hmmm. Interesting...

I've just tried setting the height in the code-behind rather than in the mark-up and got a JS error.

The error occurs in an anonymous function in, I think, Telerik.Web.UI.Editor.RadEditor.js around line 6013. The offending line is in the middle of the 5 lines shown below ...

var h=e.offsetHeight-2;
f.style.position="relative";
f.style.height=h+"px";
if(f.offsetHeight>0){i.style.height=(parseInt(i.style.height)-6)+"px";
f.style.height=(f.offsetHeight-12)+"px";

Of course, this might have nothing to do with it, but ...

-- 
Stuart

[Dobromir]

Hi Stuart,

By design, RadEditor does support its height property to be set in percentage value. However, it is possible to set the editor to fill a container by manually set its size to the size of its parent element, e.g:

<div style="width:800px; height:600px">
    <telerik:RadEditor  ID="edtHistory"
                       runat="server"
                       EnableResize="false"
                       ContentAreaMode="Div"
                       EditModes="Preview"
                       NewLineBr="false"
                       OnClientLoad="OnClientLoad">
        <Modules>
            <telerik:EditorModule Name="RadEditorStatistics" Enabled="false" Visible="false" />
            <telerik:EditorModule Name="RadEditorDomInspector" Enabled="false" Visible="false" />
            <telerik:EditorModule Name="RadEditorHtmlInspector" Enabled="false" Visible="false" />
            <telerik:EditorModule Name="RadEditorNodeInspector" Enabled="false" Visible="false" />
        </Modules>
    </telerik:RadEditor>
</div>
<script type="text/javascript">
    function OnClientLoad(sender, args)
    {
        setTimeout(function ()
        {
            var editorParent = sender.get_element().parentNode;

            if (editorParent && editorParent.offsetHeight)
            {
                var width = editorParent.offsetWidth;
                var height = editorParent.offsetHeight;
                sender.setSize(width, height);
            }
        }, 0);

    }
</script>

I hope this helps.

Regards,
Dobromir
the Telerik team

[Stuart Hemming]

Dobromir ,

> By design, RadEditor does support its height property to be set in percentage value.
Fair enough.

> However, it is possible to set the editor to fill a container by manually set its size to the size of its parent element, 
'K

> I hope this helps
Indeed.

Thanks,

-- 
Stuart

[Andrew Dixon]

I have a similar problem.  I have a RadEditor which I move around the page depending on what I am wanting to editor, so the container element for the RadEditor is dyanmic.  When I call the code

editor.setSize = (placeholder.offsetWidth, editor.get_element().style.height);

the width always ends up as 680px, no matter what the width of the placeholder element (708px or 748px in my case).

My RadEditor is setup as follows

<telerik:RadEditor ID="MessageBodyEditor" runat="server" EnableResize="false" ToolsFile="RadEditorTools.xml" OnClientCommandExecuting="OnClientCommandExecuting" EditModes="Design"
                DialogsCssFile="/styles/RadEditor/RadEditor_Dialogs_RTL.css" ContentAreaCssFile="/styles/RadEditor/EditorContentArea_RTL.css"
                StripFormattingOptions="MSWord" OnClientPasteHtml="OnRadEditorClientPasteHtml">
                <CssFiles>
                    <telerik:EditorCssFile Value="" />
                </CssFiles>
                <ContextMenus>
                    <telerik:EditorContextMenu TagName="IMG" Enabled="true" >
                        <telerik:EditorTool Name="SetImageProperties" />
                    </telerik:EditorContextMenu>
                </ContextMenus>
            </telerik:RadEditor>

and the full code that runs when I move the radeditor in the dom is

function ShowEditPanel(messageId, placeholderId, msgBodyPanelId) {
            if (lastOpenedMode == "reply")
                CancelReplyMessage();
            else if (lastOpenedMode == "edit")
                CancelEditMessage();

            $('<%=FtbMessageId.ClientID%>').value = messageId;
            var editForm = $('<%=FtbPnl.ClientID%>');
            editForm.style.display = "none";
            var placeholder = $(placeholderId);
            var msgBodyPanel = $(msgBodyPanelId);
            var msgContent = msgBodyPanel.innerHTML;

            msgBodyPanel.style.display = "none";
            placeholder.style.display = "block";
            placeholder.parentNode.style.display = "block";

            lastOpenedEditPlaceholder = placeholderId;
            lastOpenedEditMsgBody = msgBodyPanelId;
            lastOpenedMode = "edit";

            var editor = $find('<%=MessageBodyEditor.ClientID%>');

            editor.setSize = (placeholder.offsetWidth, editor.get_element().style.height);

            placeholder.appendChild(editForm);
            editForm.style.display = "inline";

            editor.onParentNodeChanged();
            var rtl = $('<%=hf_LanguageRTL.ClientID%>');
            if (rtl.value == 'true') {
                editor.get_document().body.style.textAlign = "right";
                editor.get_document().body.style.direction = "rtl";
            }
            editor.get_document().body.style.fontFamily = '"Verdana", Arial, Helvetical, Sans-Serif';
            editor.get_document().body.style.fontSize = '10pt';
            editor.set_html(msgContent);
            editor.setFocus();
            if (!$telerik.isIE) {
                editor.set_mode(2);
                editor.set_mode(1);
            }

            editor.getToolByName("Emoticons").get_element().className = "Emoticons";
            $('FtbReplyModeBtns').style.display = "none";
            $('FtbEditModeBtns').style.display = "block";
            $('FtbEditModeBtns').style.visibility = "visible"; //fix for IE problems
            toggleReplyAndEditMessageBtn(false);
        }

Any ideas?

Thanks
Andrew

[Rumen]

Hi Andrew,

Could you please isolate the problem in a fully working simple project and send it through a new support ticket? This will be the fastest way to debug the issue and see why the parent element height is not updated.

Looking forward to hearing from you,
Rumen
the Telerik team