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

Filling the container

5 Answers 77 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Stuart Hemming
Top achievements
Rank 2
Stuart Hemming asked on 20 Jul 2010, 05:28 PM
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

5 Answers, 1 is accepted

Sort by
0
Stuart Hemming
Top achievements
Rank 2
answered on 20 Jul 2010, 05:46 PM
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



0
Accepted
Dobromir
Telerik team
answered on 23 Jul 2010, 11:38 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Stuart Hemming
Top achievements
Rank 2
answered on 23 Jul 2010, 12:16 PM
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
0
Andrew Dixon
Top achievements
Rank 1
answered on 16 Aug 2010, 06:08 AM
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
0
Rumen
Telerik team
answered on 18 Aug 2010, 12:25 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Editor
Asked by
Stuart Hemming
Top achievements
Rank 2
Answers by
Stuart Hemming
Top achievements
Rank 2
Dobromir
Telerik team
Andrew Dixon
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or