Spell Checker overlapping over page content below Editor.

[Jeff]

Hi,

I have found a layout issue with using the spell check feature of the RadEditor, for some reason it is causing the height of the Editor to increase and overlap the content below.  This happens in IE7 and not in Firefox.

You can recreate this issue by going to your live examples in IE7 here and choosing the spell checker.  You can see that part of the content below ("Example Source Code & Description") is being overlapped by the RadEditor.

Is there a solution to resolve this?

Thanks for your help,

Jeff

[Rumen]

Hi Jeff,

Thank you for reporting this problem, which indeed appears only in IE7. I logged it in our bug tracking system and our developers will fix it in one of the upcoming hotfixes.

We do appreciate your bug report and I updated your Telerik points.

Best wishes,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[A]

Hi,
I also have encountered this issue.
The posted solution for showing the RadEditor as a textbox causes the spellchekers buttons to be invisible but the content area is still shifted down.
I can make the toolsarea not take up space via CSS but is there a way I can use a custom toolbar button that I add to the RadEditor to envoke the Spellcehcker Cancel and Finish Spellchecking buttons to avoid having to show the toolarea?

Thanks, Andy

[Rumen]

Hi Andy,

You can use the following code to decrease the editor's height when the spellchecker is fired and to increase it back to the original when the spellchecking is finished:

<script type="text/javascript">  
    function OnClientLoad(sender, args)  
    {  
        sender.add_spellCheckLoaded( 
            function()  
            { 
                var spell = sender.get_ajaxSpellCheck();  
                 
                spell.add_spellCheckStart( 
                    function(sender, args)  
                    {  
                        var editor = sender.get_editor(); 
                        var edH = editor.get_element().clientHeight; 
                        var edW = editor.get_element().clientWidth; 
                        editor.setSize(edW,edH-9); 
                    }); 
             
                spell.add_spellCheckEnd( 
                    function(sender, args)  
                    { 
                        var editor = sender.get_editor(); 
                        var edH = editor._element.clientHeight; 
                        var edW = editor._element.clientWidth; 
                        editor.setSize(edW,edH+9); 
                    }); 
            } ); 
        } 
</script> 
 
<telerik:RadEditor Id="RadEditor1" Runat="server"  
    OnClientLoad="OnClientLoad"> 
    <Content> 
        Some tezzt content. 
    </Content> 
</telerik:RadEditor> 

You need also to hide the modules with the following code:

        RadEditor1.EnsureToolsFileLoaded();
        RadEditor1.Modules.Clear();



All the best,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Oleg]

It is does not work for IE7 and IE8!

[Rumen]

Hi,

I tested the code with the latest version of RadEditor under IE7, IE8 and IE9 and verified that it works as expected. You can see my test in the following video: http://screencast.com/t/zOKDCwIt.

For your convenience I have attached my project.

Best regards,
Rumen
the Telerik team