[Solved] RadEditor height issue in FireFox

[reethish]

Hello,

I am using the Telerik.Web.UI.dll(2008.1.415.20) which is the latest version of the Asp.Net Ajax Control. RadEditor not displaying properly in the firefox. The code that I have used to create the RadEditor is

<RadControl:RadEditor ID="RadEditor1" runat="server" Skin="WebBlue" BackColor="white" Height="135"  EnableViewState="false"EditModes="Design" ToolbarMode="Default" Width="99%" OnClientCommandExecuting="OnClientCommandExecuting" OnClientLoad="CharactersLimit">

</RadControl:RadEditor>

Here the content area flows down beyond the Editor When we dont set or set the height greather than 200px its working fine. Whereas the previous version of the dll(Prometheus) has been working fine in FireFox. Could you help out to fix this

Thanks & Regards,

Reethish

[Rumen]

Hello Reethish,

Actually, the latest version of Telerik.Web.UI.dll is 2008.1 515.

In regards to the observed behavior in Firefox: This Height problem is due to a well known issue / bug in the Mozilla browser, and not in RadEditor. The browser itself ignores setting any heights smaller than 150px to the IFRAME element.

Here is a small sample that shows the root of the problem:


<table style="height:80px;border:3px solid green"> 
    <tr style="height:100%"> 
        <td style="height:100%"> 
            <iframe style="border: 1px solid red; height:100%" src=""></iframe>
        </td>
    </tr>
</table>

As you can see, there is no RadEditor here. Just a simple table with an iFrame in it. Check how it will look like in IE and Firefox.

To fix the problem use the following code, which will allow you to set the editor's iframe height to 135 px:

<script type="text/javascript">
function SetCorrectSize(editor, args)
{                  
    window.setTimeout(function()
        {
            var editorIframe = $get("RadEditor1Wrapper").getElementsByTagName("iframe")[0];
            editorIframe.style.height = "135px";
            editor.setSize(350, 135);
       },100);
}
</script>
<telerik:RadEditor ID="RadEditor1" runat="server" Height="135" OnClientLoad="SetCorrectSize"  EditModes="Design" ToolbarMode="Default" >
  <Tools>
    <telerik:EditorToolGroup>
        <telerik:EditorTool Name="Bold" />
        <telerik:EditorTool Name="Italic" />
        <telerik:EditorTool Name="Underline" />
    </telerik:EditorToolGroup>
  </Tools>
 
</telerik:RadEditor>

You should also hide the editor's modules by setting in the codebehind: RadEditor1.Modules.Clear();

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Alan]

Hello,

I just tried the workaround that you have mentioned with the latest dll but still its not working fine. If I try to put the script, even in IE its not working as desired.

But in Telerik.Web.UI.dll  2007.3.1425.20(Prometheus) dll the RadEditor works fine in both IE and firefox was abled to set the height of the editor. Could you please tell me where I went wrong with the latest version. The same code that I have used to create the radEditor in the latest version, is used in the  Telerik.Web.UI.dll  2007.3.1425.20 where it works fine .Whereas its not working in Telerik.Web.UI.dll is 2008.1 515. version.

Thank you,
Leeds

[Rumen]

Hi Mark,

The "Height smaller than 150 px" problem in Firefox exists in all editor's versions, because this is a browser related issue.

The provided code in my earlier reply should be enhanced a bit and run only when the used browser is Firefox, because the problem does not exist in IE. Here is the modified version of the code that sets the editor's height to 135 pixels in both IE and Firefox:

<asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager>
<script type="text/javascript">
function SetCorrectSize(editor, args)
{                 
    if(!document.all)
    {
        window.setTimeout(function()
            {
                var editorIframe = $get("RadEditor1Wrapper").getElementsByTagName("iframe")[0];
                editorIframe.style.height = "90px";
                editor.setSize(650, 100);
           },100);
    }
}
</script>
<telerik:RadEditor ID="RadEditor1" runat="server" Height="135" OnClientLoad="SetCorrectSize"  EditModes="Design" ToolbarMode="Default" >
  <Tools>
    <telerik:EditorToolGroup>
        <telerik:EditorTool Name="Bold" />
        <telerik:EditorTool Name="Italic" />
        <telerik:EditorTool Name="Underline" />
    </telerik:EditorToolGroup>
  </Tools>
</telerik:RadEditor>

Do not forget to hide the editor's modules with: RadEditor1.Modules.Clear();


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Alec]

I'd like some help with this problem also.

I have found:

• This does not happen with earlier RadUpload releases - v 2007.31314 does not have this problem (Why is this??)
• I only get this problem when I set ToolbarMode=ShowOnFocus

Also, I cannot get your javascript to work.  Am I supposed to modify $get("RadEditor1Wrapper")?  My RadEditor ID is radEditorSummary so I tried 'radEditorSummaryWrapper' but this did not work.  Any ideas?  I have about 10 radEditors on the 1 page (all with different heights) and I'd like to know how I can have just one javascript script to fix all of them in one go.

Thanks,
Alec

[Rumen]

Hello Alec,

Indeed, you are correct that in version 2007.3.1314 the editor provides support for this Firefox issue, however in the latest version we provided support for DockingZones and we temporary disabled the height < 150 px feature. It is logged in our to-do list and we will provide it again in one of the subsequent updates.

Currently, please use the provided code. Here is an example how to run the code for multiple editors on page:

<script type="text/javascript">
function SetCorrectSize(editor, args)
{                
    if(!document.all)
    {
        window.setTimeout(function()
            {
                var editorIframe = $get(editor.get_id() + "Wrapper").getElementsByTagName("iframe")[0];
                alert(editorIframe);
                editorIframe.style.height = "90px";
                editor.setSize(650, 100);
           },100);
    }
}
</script>
<telerik:RadEditor ID="radEditorSummary" runat="server" Height="135" OnClientLoad="SetCorrectSize"  EditModes="Design" ToolbarMode="Default" >
  <Tools>
    <telerik:EditorToolGroup>
        <telerik:EditorTool Name="Bold" />
        <telerik:EditorTool Name="Italic" />
        <telerik:EditorTool Name="Underline" />
    </telerik:EditorToolGroup>
  </Tools>
</telerik:RadEditor>
<telerik:RadEditor ID="RadEditor2" runat="server" Height="135" OnClientLoad="SetCorrectSize"  EditModes="Design" ToolbarMode="Default" >
  <Tools>
    <telerik:EditorToolGroup>
        <telerik:EditorTool Name="Bold" />
        <telerik:EditorTool Name="Italic" />
        <telerik:EditorTool Name="Underline" />
    </telerik:EditorToolGroup>
  </Tools>
</telerik:RadEditor>
<telerik:RadEditor ID="RadEditor3" runat="server" Height="135" OnClientLoad="SetCorrectSize"  EditModes="Design" ToolbarMode="Default" >
  <Tools>
    <telerik:EditorToolGroup>
        <telerik:EditorTool Name="Bold" />
        <telerik:EditorTool Name="Italic" />
        <telerik:EditorTool Name="Underline" />
    </telerik:EditorToolGroup>
  </Tools>
</telerik:RadEditor>

You can hide the editors' modules via the codebehind with this code:

        radEditorSummary.Modules.Clear();
        RadEditor2.Modules.Clear();
        RadEditor3.Modules.Clear();


Greetings,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center