Resize radeditor to fill containing pane

13 posts, 0 answers
  1. thepilsbury
    thepilsbury avatar
    36 posts
    Member since:
    Jan 2007

    Posted 18 Feb 2008 Link to this post

    How can I get a radeditor to fill out the full content area of a radpane? I've tried setting the radeditor's width and height properties to 100% but this does not work.

    The radeditor does not have any modules defined and has just a basic set of tools.
  2. George
    Admin
    George avatar
    298 posts

    Posted 19 Feb 2008 Link to this post

    Hi thepilsbury,

    You can toggle the editor to maximized mode, that will fit its wrapper to the RadPane's borders. It can be done either manually from the toolbar or with JavaScript code in the following way:

    editor.fire("ToggleScreenMode");

    I hope this helps.

    Sincerely yours,
    George
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. thepilsbury
    thepilsbury avatar
    36 posts
    Member since:
    Jan 2007

    Posted 19 Feb 2008 Link to this post

    Unfortunately this does not work as it resizes to the full browser window not the radpane it resides in.
  5. George
    Admin
    George avatar
    298 posts

    Posted 19 Feb 2008 Link to this post

    Hello thepilsbury,

    Please find the attached sample project demonstrating the desired functionality. There is a RadPane with  a RadEditor placed inside that should fit to the pane's borders when is maximized. You should click the Toggle Full Screen Mode button.

    All the best,
    George
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Piotr Szmyd
    Piotr Szmyd avatar
    22 posts
    Member since:
    Jul 2007

    Posted 14 Mar 2008 Link to this post

    I have a similar problem.

    The RadPane you provided in this example has it's Height set explicitely in pixels, but in my scenario RadPane is set to fill the entire available space (as a free pane - without height set) - with 2 other Panes (below and above) with Heights set in pixels.

    And I want RadEditor to fill 100% of this dynamically changing pane (user can resize RadWindow in which the whole page is showing).

    In this case your example isn't working...

    Regards,
    Piotr
  7. George
    Admin
    George avatar
    298 posts

    Posted 17 Mar 2008 Link to this post

    Hello Piotr Szmyd,

    In your case you should set the height declaratively to 100% only on the splitter and to put this code in your <head> of the page:

        <style type="text/css">  
        html, form, body{ height: 100%; margin: 0; }   
        </style> 
     

    Sincerely yours,
    George
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Rei
    Rei avatar
    6 posts
    Member since:
    Oct 2007

    Posted 22 Mar 2008 Link to this post

    function ResizeEditor()  
            {  
               var oFun = function ()  
               {  
                  var editor = $find("<%=RadEditor1.ClientID%>");  
                  var pane = document.getElementById("<%=RadSplitterPane1.ClientID%>");  
                  var _paneHeight = ((pane.height == '') || (pane.height !== undefined)) ? pane.height : pane.offsetHeight;  
                  var _paneWidth = ((pane.height == '') || (pane.width !== undefined)) ? pane.width : pane.offsetWidth;  
                   
                  editor.setSize(_paneWidth,_paneHeight);  
     
               }  
               window.setTimeout(oFun,500);  
                 
            }  
            window.onresize = ResizeEditor; 

    I use above code instead of ToogleScreenMode. Set the containing pane Scrolling to None. And also in RadEditor put OnClientLoad="ResizeEditor"

    Hope this helps if ToogleScreenMode doesn't work with your code.
  9. Andrew Benson
    Andrew Benson avatar
    14 posts
    Member since:
    Jan 2005

    Posted 09 Oct 2009 Link to this post

    The sample project for filling a RadPane with the editor when it's set to FullScreenMode works great. Does this work within a RadPane because it's the containing HTML elements are table/tr/td? or is there something unique about embedding the editor in a radpane? I'd like to implement toggle full screen mode, but have it fill a div or asp:panel.

    Is this possible?

    Thanks,
    Andrew
  10. Rumen
    Admin
    Rumen avatar
    12848 posts

    Posted 14 Oct 2009 Link to this post

    Hi Andrew,

    Can you please provide more information about your scenario? What have you done so far? What was the result and what the expected result should be?

    It will be best to open a support ticket and send a fully working project that demonstrates your scenario along with a screenshot of the problem and of the desired functionality.

    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.
  11. Andrew Benson
    Andrew Benson avatar
    14 posts
    Member since:
    Jan 2005

    Posted 14 Oct 2009 Link to this post

    Rumen,
    I don't know if my situation is a "problem." I was just curious to find out how the RadEditor could be resized to fill a RadPane, but not other containers on the page. If there is no way to have the editor fill another type of container (panel, div etc), I might be able to add a RadSplitter to the page without disrupting the app, but I was hoping to find a way to use containers I had already placed on the page, such as an ASP Panel, or a DIV.

    I can't provide you with the project it's embeddded in currently. I may be able to get a sample project set up, but I'm hoping my description is enough to get some info...

    Thanks
    Andrew
  12. Rumen
    Admin
    Rumen avatar
    12848 posts

    Posted 19 Oct 2009 Link to this post

    Hi Andrew,

    You scenario is still unclear and it would be better to open a support ticket and send a sample working project demonstrating the problem.

    Please, note that RadEditor does not support height in percents and to fit inside RadPane you should write javascript code which will set the Height of the editor's wrapper and IFRAME content area elements according to the height of the RadPane.

    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.
  13. Andreas Ladis
    Andreas Ladis avatar
    17 posts
    Member since:
    Mar 2009

    Posted 16 Feb 2010 Link to this post

    Thanks, it worked!
  14. Adam
    Adam avatar
    17 posts
    Member since:
    Sep 2012

    Posted 13 Aug 2015 in reply to Rei Link to this post

    Rei,

    That script was exactly what I needed.  Thanks.

    While the ToggleScreenMode option technically worked, it wasn't a good user experience in my case as it hid the tabs I had showing above the radEditor.

    I modified the code slightly, but you got me on the right path :

    function OnClientLoad()
    {
        var oFun = function () 
        {
            $find("<%=radEditor.ClientID%>").setSize((window.innerWidth-5), window.innerHeight-28); 
        }
        window.setTimeout(oFun,10); 
        //Not good user experience.
        //editor.fire("ToggleScreenMode");
    }
    window.onresize = OnClientLoad;

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017