IE 8 or below SpellCheck not scrolling textbox

[lex]

I our system, a few of our users are experiencing a replicate-able issue regarding using the spell checker function.

The issue, which only seems to happen on IE 8 or below, occurs when the text in the text box has more lines than the size of the box. The issue itself being that the textbox does not automatically scroll down to any words blow the currently viewed lines in the text box. This is making it very hard for our users to spell check properly.

[lex]

Using version 2011.2.915.35 of Telerik.web.ui.

[Joana]

Hello Lex,

I am not sure whether I understand the issue. In the spell dialog you want to see the words selected in the textbox  that has large content(and scrollbar). Is this the behavior you want to achieve?

I have attached a short video that demonstrates the behavior on my side in the specified browser. Are you sure that it is reproduced only in IE and in version smaller than 8? It will be very helpful if you could sent a video that shows the issue or more detailed steps to reproduce.

You could test the behavior in our demos with latest version(currently it's Q1 2014). If you don't reproduce it there I suggest that you upgrade the Telerik UI for ASP.NET AJAX.


Regards,
Joana
Telerik

 

 

[lex]

Hi Joana,

Thanks for the reply. I have attached a video displaying the issue. I do not think upgrading the newest version is an option for us. We were wondering if there is a fix that you may know of for the current issue we are having.

[lex]

I have not been able to attach a video file due to file type restrictions. Is there some way i can get this too you?

[Joana]

Hi Lex,

You could add the video file to archive as zip and rar are allowed extensions. The allowed extensions are  zip, rar, ace, jpg, gif, css, png. Another option is to use Jing to record the video and upload it to Screencast.com.

Regards,
Joana
Telerik

 

 

[lex]

I'm getting the below error when trying to attach a 662kb Zip file.

[Marin Bratanov]

Hi Lex,

You can attach zip archives only in support tickets. If you can record a video that demonstrates the problem with the latest release, you can upload it to a free hosting site (e.g., Jing offers this OOB, you can save videos to SkyDrive, for example, etc.). Of course, an alternative is to open a formal support ticket where you can send us the code and videos together with the list of steps that reproduce the problem. Once we can observe it, we can perform an investigation and see what the available options are.


Regards,

Marin Bratanov
Telerik

 

 

[lex]

I see, thanks. I have uploaded it to my public dropbox: https://dl.dropboxusercontent.com/u/15496323/Spell%20Checker.zip

[Joana]

Hi Lex,

What I see from the video you have provided, the issue is related to the height of the td element which is increased when AjaxSpellCheck command is fired. This issue is not reproducible in the latest version of Telerik UI for ASP.NET AJAX and I advice you to upgrade.

However, I could give you an example how you could fix the issue if indeed upgrading is not an option for you. In the video I saw that you are using EditModes="Design" and you have one row with tools. Based on this I have made a workaround for the issue but most probably you will need to modify it in order to work in your scenario.

You could use the add_spellCheckStart() and add_spellCheckEnd() functions to set a specific height to the td element that contains the iframe of the RadEditor. You could check the id of this element via Firebug, Dev toolbar, etc and you could change the value of the height for your scenario.

<rad:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted" ToolsFile="ToolsFile.xml" EditModes="Design">
    </rad:RadEditor>
    <script type="text/javascript">
        function OnClientCommandExecuted(editor, args) {
            if (args.get_commandName() == "AjaxSpellCheck") {
                $get("RadEditor1Center").style.height = "340px";
                setTimeout(function () {
                    editor.get_ajaxSpellCheck().add_spellCheckEnd(function () { $get("RadEditor1Center").style.height = "100%"});
                }, 300);
            }
        }
    </script>

I have attached a page that shows this example.

I hope this will help you resolve the issue.

Regards,
Joana
Telerik