Height Attribute (100%)

10 posts, 0 answers
  1. Carlos Redondo
    Carlos Redondo avatar
    1 posts
    Member since:
    Jan 2009

    Posted 20 Oct 2009 Link to this post

    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
  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 23 Oct 2009 Link to this post

    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.
  3. lee_bnsf
    lee_bnsf avatar
    16 posts
    Member since:
    Apr 2007

    Posted 21 Oct 2011 Link to this post

    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
  4. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 25 Oct 2011 Link to this post

    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
    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
  5. tasos
    tasos avatar
    26 posts
    Member since:
    Jun 2010

    Posted 02 Mar 2012 Link to this post

    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?
  6. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 02 Mar 2012 Link to this post

    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
    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.
  7. tasos
    tasos avatar
    26 posts
    Member since:
    Jun 2010

    Posted 13 Mar 2012 Link to this post

    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!
  8. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 15 Mar 2012 Link to this post

    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!
  9. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 16 Mar 2012 Link to this post

    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">
    <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
    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.
  10. tasos
    tasos avatar
    26 posts
    Member since:
    Jun 2010

    Posted 21 Mar 2012 Link to this post

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