radEditor (re)sizing problems

[Jeanne]

I've got a radEditor in a popup form template of a radGrid as follows:

<EditFormSettings EditFormType="Template" CaptionFormatString="Edit News Item" >
  <PopUpSettings Height="500" Width="900" Modal="true" CloseButtonToolTip="Close" ScrollBars="Auto"/>
  <EditColumn></EditColumn>
  <FormTemplate>
    <table width="100%" border="0" cellpadding="0" cellspacing="6">
      <tr>
        <td valign="top"><b>Title:</b></td>
        <td valign="top">
          <telerik:RadTextBox ID="rtbTItle" runat="server" Width="400" TextMode="SingleLine" Text='<%# DataBinder.Eval(Container, "DataItem.Title") %>' Skin="WebBlue">
          </telerik:RadTextBox>
        </td>
      </tr>
      <tr>
        <td colspan="2" valign="top" style="">
          <b>Item Text:</b><br />
          <telerik:RadEditor ID="reItemText" runat="server" OnClientLoad="reItemText_OnClientLoad" OnClientModeChange="reItemText_OnClientModeChange" Width="800" Height="300" AutoResizeHeight="false" EnableResize="false" ToolsWidth="800" ContentAreaMode="Div" Skin="WebBlue" Content='<%# DataBinder.Eval(Container, "DataItem.ItemText") %>'>
          </telerik:RadEditor>
        </td>
      </tr>
    </table>
  </FormTemplate>
</EditFormSettings>

Because of initial size problems I've included the external style sheet files as recommended in another forum post like this:

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server">
  <StyleSheets>
    <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Editor.css" />
    <telerik:StyleSheetReference Assembly="Telerik.Web.UI.Skins" Name="Telerik.Web.UI.Skins.WebBlue.Editor.WebBlue.css" />
    <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Window.css" />
    <telerik:StyleSheetReference Assembly="Telerik.Web.UI.Skins" Name="Telerik.Web.UI.Skins.WebBlue.Window.WebBlue.css" />
  </StyleSheets>
</telerik:RadStyleSheetManager>

I've also got an OnClientLoad handler to set the size of the radEditor like this:

function reItemText_OnClientLoad(sender,args){
  sender.setSize( 800, 300 );
  var oElem = sender.get_element( );
  oElem.style.height = "300px";
  oElem.style.width = "800px";
}

This all works beautifully, until  you change the radEditor mode. Then the size of the radEditor changes. How it changes seems to depend on which order you change modes in, but it never does return to the size I originally set it to.

Here are two examples. I've attached screen captures showing the problem using Iconico's Screen Calipers to measure the size of the radEditor.

Example 1:
Initial size in Design mode - 300px (A1 Design.png)
Change to Preview mode - 294px (A2 Preview.png)
Change to HTML mode - 294px (A3 HTML.png)
Change to Design mode - 294px (A4 Design.png)
Change t HTML mode - 330px (A5 HTML.png)

Example 2:
Initial size in Design mode - 300px (B1 Design.png)
Change to HTML mode - 330px (B2 HTML.png)
Change to Preview mode - 324px (B3 Preview.png)
Change to HTML mode - 318px (B4 HTML.png)
Change to Design mode - 324px (B5 Design.png)

I tried adding an OnClientModeChange event handler to the radGrid to reset the size again (code identical to OnClientLoad handler) but that had no effect.

[Jeanne]

I changed my OnClientModeChange event handler to execute the resizing code after a 1/2 second timeout and it almost works, but switching from Design mode to HTML mode leaves the button hanging off the bottom, and switching from Preview mode to HTML mode leaves some extra space at the bottom of the display area. See the attached screen captures.
 

[Rumen]

Hello,

My suggestion is to set the ContentAreaMode to "Iframe" and test again.

What you can test before switching to IFRAME content area mode is to remove the modules and see whether this will fix the appearance problem in DIV mode: Disable or Hide Modules.

All the best,
Rumen
the Telerik team

[Jeanne]

I already tried iframe mode, that was worse.

So in order to fix a resizing bug, I should start disabling the functionality of the editor? If I switched it to a plain textbox I wouldn't have any resizing problems at all, but also no functionality. Disabling features is not a solution to fixing a bug. I've demonstrated pretty clearly that there is a resizing bug. It should be fixed.

[Rumen]

Hello,

I fully agree that this is a bug of RadEditor in DIV content area mode, which can be reproduced by toggling the View modes of RadEditor in the following live demo. After escalating the issue to the attention of our developers, they fixed it in IE9, Chrome, Safari and Firefox. The fix will be available in Q3 2012 SP1 and will appear in the tomorrow's latest internal build.

As you know RadEditor is a complex composite control that is so to provide wide cross browser support. This extended support introduces different sizing problems in different scenarios as in your case in EditFormSettings. Basically, we fix all reported issues on a case by case basis and for this reason we should be able to firstly replicate them locally so that we can debug them further, found what are causing them and fix them. So far you have provided only code snippets, but not a working project as well as you have not specified under which browser the problem exists. That is why my recommendation is to test the Latest Internet Build that will be released tomorrow and which will include the fix for the problem reproducible in the live demo. If the problem in your application is other and it still persists with the latest internal build, please try to isolate it and to provide a runnable project so that we can debug it locally.

Thank you for your understanding and assistance.

Best regards,
Rumen
the Telerik team