| RadControls version |
Tested on 2011 Q3
|
| .NET version |
Tested 4.0 but there is nothing specific to this version
|
| Visual Studio version |
2010
|
| programming language |
C#
|
| browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
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...
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...
Although I've not tried it, I imagine you would simply add the following to your markup....
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...
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...
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...
I hope that all of the above proves to be useful someone else.