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

Resize radeditor to fill containing pane

12 Answers 300 Views
Editor
This is a migrated thread and some comments may be shown as answers.
thepilsbury
Top achievements
Rank 1
thepilsbury asked on 19 Feb 2008, 12:55 AM
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.

12 Answers, 1 is accepted

Sort by
0
George
Telerik team
answered on 19 Feb 2008, 12:30 PM
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
0
thepilsbury
Top achievements
Rank 1
answered on 19 Feb 2008, 04:03 PM
Unfortunately this does not work as it resizes to the full browser window not the radpane it resides in.
0
George
Telerik team
answered on 19 Feb 2008, 04:17 PM
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
0
Piotr Szmyd
Top achievements
Rank 1
answered on 14 Mar 2008, 02:35 PM
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
0
George
Telerik team
answered on 17 Mar 2008, 12:03 PM
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
0
Rei
Top achievements
Rank 1
answered on 22 Mar 2008, 11:01 AM
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.
0
Andrew Benson
Top achievements
Rank 2
answered on 09 Oct 2009, 06:35 PM
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
0
Rumen
Telerik team
answered on 14 Oct 2009, 03:30 PM
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.
0
Andrew Benson
Top achievements
Rank 2
answered on 14 Oct 2009, 03:46 PM
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
0
Rumen
Telerik team
answered on 19 Oct 2009, 08:26 AM
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.
0
Andreas Ladis
Top achievements
Rank 1
answered on 16 Feb 2010, 08:32 AM
Thanks, it worked!
0
Adam
Top achievements
Rank 1
answered on 14 Aug 2015, 03:22 AM

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;

Tags
Editor
Asked by
thepilsbury
Top achievements
Rank 1
Answers by
George
Telerik team
thepilsbury
Top achievements
Rank 1
Piotr Szmyd
Top achievements
Rank 1
Rei
Top achievements
Rank 1
Andrew Benson
Top achievements
Rank 2
Rumen
Telerik team
Andreas Ladis
Top achievements
Rank 1
Adam
Top achievements
Rank 1
Share this question
or