Height Attribute (100%)

[Carlos Redondo]

Hi Guys,
I have a table with two rows, the first row contains a web user control with a classic toolbar control, the second row contains a RadEditor (v 2009.2.701.35). So basically, I want to have my RadEditor consuming the 100% of my remaining content area, but I don't want to use a fixed size because it will work for a "Hardcode" screen resolution.  I noticed that default height value is 400px, but if I set a width value of 100% it is interpret as 100px (bug??). Is there any way to accomplish this UI requirement?

Thanks

[Rumen]

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.

[lee_bnsf]

I got this working in my app, but when switching modes (HTML or Preview) the editor snaps back to it's original size (apparently) and stays that size even when switching back to design mode.  How can I catch this and either prevent it or resize the editor again to fill its container?

Thanks in advance!
Lee

[Rumen]

Hi Lee_Bnsf,

You can attach to the OnClientModeChange event property, check for HTML mode and resize it to fit the desired height.

editor.get_textArea() method returns a reference to the RadEditor's TextArea in Html mode.

All the best,
Rumen
the Telerik team

[tasos]

Well and then you have to catch resize of the window..omg i'm trying to make it work for two weeks now but it's impossible.
The td RadEditor1Center with height 100% is very bad.
Anyway,i have included the editor in an absolute positioned element. top:200px,bottom:0px so it will stretch.
It works fine in all browsers except ie which has problems calculating 100% (http://www.sitepoint.com/forums/showthread.php?834817-height-of-td-in-ie9).
So in ie the table is highter than (bottom:0px) and so it doesn't work.I'm trying to find a nice solution but i can't.
Any ideas please?

[Rumen]

Hello,

I just published the following code library article provided by Stuart Hemming, which could be helpful for your scenario. If you have further questions, open a support ticket and send a sample working project which demonstrates the problem. We will examine it and provide a solution.

Of course, you can post comments and suggestions in the code library as well.

Kind regards,
Rumen
the Telerik team

[tasos]

Hello again.
Finally i have managed to create a demo application which i have attached.
Try it with firefox or chrome and ie9.
You will see what i mean.
Let me know if there is a solution because i really need it.
The download link is http://www.2shared.com/file/nR9w9smV/WebApplication2.html

ps:Please add the telerik dll in order to be able to compile.The file was too big that's why i haven't included them.
Thank you in advance!

[Richard]

Tasos:

Since it appears that your issue is urgent, I would make the following suggestion to you. You should open a support ticket with Telerik and you can post your demo application as part of the submission as suggested in the Isolating a problem in a sample project blog.

Telerik Admins do their best to monitor forum threads, but they cannot guarantee timely responses. The support tickets get priority treatment.

Hope this helps!

[Rumen]

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>
    </div>
    </form>
</body>
</html>

All the best,
Rumen
the Telerik team

[tasos]

Hello again and sorry for the delay.
This doesn't solve the resize issue(try to resize the window).
Moreover it may makes ie work better but it breaks other browsers.
Anyway thanks for the interest.
I'm using the onresize event and in case the browser is ie i (initially) give it the right height.
This kind of solutions i try to avoid but it works,so for now i'm fine.
Thanks again.