Resizing RadEditor to fill a container

4 posts, 0 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 29 Feb 2012 Link to this post


    RadControls version

    Tested on 2011 Q3 

    .NET version

     Tested 4.0 but there is nothing specific to this version

    Visual Studio version


    programming language


    browser support

    all browsers supported by RadControls


    The question about sizing the editor to fit a container crops up a lot and so I thought I'd post the solution I've used which is based on the stock answer posted in the forum, which is this...

    editor.get_element().style.height = containerHeight;
    editor.get_contentAreaElement().style.height = containerHeight - offSet;

    where containerHeight is, well, the height of the container and offSet is the amount of space you need for your tools and the mode switching tabs.

    This didn't work for me. This is why I say my solution is "based on" the standard one. I found that if the size of my container meant that the editor was going to turn out to be smaller than the default the editor didn't resize the way I expected.
    The first thing I discovered was that the editor has min-height and min-width applied to it. What's more, these values appear in the generated mark-up as inline styles.

    In my case the editor is added to the page dynamically, in code-behind, so I added this...

    _RadEditor.Style.Add("min-height", "150px !important");
    _RadEditor.Style.Add("min-width", "600px !important");

    Although I've not tried it, I imagine you would simply add the following to your markup....

    style="min-height:150px !important; min-width:600px !important;" 

    Even after making this change though, whilst my Content Area was the correct size, the HTML elements appearing below the editor were still obscured. A little digging with IE's developer tools showed me that the table cell that the IFRAME which is the content area was contained in hadn't properly resized.

    The inline style for this cell set height:100%. but it wasn't shrinking to the new size. So, I added a bit extra to my resize function, specifically this...

    $telerik.$('td .reContentCell').height(1);

    OK. So now my editor was sized correctly. But, unlike a lot of the examples I was seeing, my editor was in a RadWindow rather than on a 'simple' page and if my RadWindow resized I needed my editor to resize along with it.

    As it happens, I have a page class that is used to populate my RadWindows and this class includes a function that is called when the RadWindow resizes. So, I call my editor sizing function from within my RadWindow resize function and I'm well away! So, what I have now is this...

    function SetEditorHeight(editor)
      $telerik.$('td .reContentCell').height(1);
      var containerHeight = radWindowContainerHeight();
      var editorOffset = 165;
      editor.get_element().style.height = containerHeight;
      editor.get_contentAreaElement().style.height = containerHeight - editorOffset;

    I call SetEditorHeight() passing in a reference to the RadEditor from the RadEditor's OnClientLoad clientsize event and  from my RadWindow Resize handler.

    Almost done.

    If I click on one of the Mode tabs (Design, HTML, or Preview) the content area obscures the elements below the the editor.

    Another rummage through the forum suggests wiring up the client size event OnClientModeChange. So, I call my SetEditorHeight() functon but to no avail.

    it seems that you need to allow a little time to pass and so I wired up the OnClientModeChange event to function setting a timeout like this...

    function OnEditorModeChanged(sender, e)
      setTimeout(function () { SetEditorHeight(sender); }, 100);

    I hope that all of the above proves to be useful someone else.

  2. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 05 Mar 2012 Link to this post

    I just thought I'd post a handly little addendum to this for those of you whose containers are resizable and for whom editor's resize grab handle causes more trouble than it's worth.

    To remove the grab handle add the following line to your resize code:
    $telerik.$('.reResizeCell').css('display', 'none');

    And the problem is gone.

  3. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 16 Jan 2014 Link to this post

    I tried your solution, but I get an error message stating the "radWindowContainerHeight()" is not defined ?!?
  4. Ianko
    Ianko avatar
    1948 posts

    Posted 20 Jan 2014 Link to this post


    Just a quick note, since 2013 Q3 SP2 the RadEditor control is improved with a new size calculations logic and can be used with percentage values, so that it could be used with responsive containers. 

    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

This Code Library is part of the product documentation and subject to the respective product license agreement.