[Solved] Vertical scrollbar not showing

[reynald lawrence]

Hi! I have a RadEditor and customized its control tools, but the vertical scrollbar doesn't show in the text area.

Here's the markup:

<telerik:RadEditor ID="EdtDesc" runat="server" EditModes="Design" OnClientLoad="LimitCharacters"
                                    OnClientPasteHtml="OnClientPasteHtml" >
                                    <Languages>
                                        <telerik:SpellCheckerLanguage Code="en-US" Title="English" />
                                    </Languages>
                                    <Tools>
                                        <telerik:EditorToolGroup>
                                            <telerik:EditorTool Name="Undo" />
                                            <telerik:EditorTool Name="Redo" />
                                            <telerik:EditorSeparator Visible="true" />
                                            <telerik:EditorTool Name="Bold" />
                                            <telerik:EditorTool Name="Italic" />
                                            <telerik:EditorTool Name="Underline" />
                                            <telerik:EditorSeparator Visible="true" />
                                            <telerik:EditorTool Name="JustifyLeft" />
                                            <telerik:EditorTool Name="JustifyCenter" />
                                            <telerik:EditorTool Name="JustifyRight" />
                                            <telerik:EditorTool Name="JustifyFull" />
                                            <telerik:EditorSeparator Visible="true" />
                                            <telerik:EditorTool Name="AjaxSpellCheck" />
                                        </telerik:EditorToolGroup>
                                    </Tools>
                                    <Modules>
                                        <telerik:EditorModule Name="RadEditorStatistics" />
                                    </Modules>
                                </telerik:RadEditor>

<script type="text/javascript">
        var editorList = new Object();
        var editorLengthArray = [4000, 30];
        var counter = 0;

        function isAlphaNumericKey(keyCode) {
            if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91)) {
                return true;
            }
            return false;
        }

        function LimitCharacters(editor) {
            editorList[editor.get_id()] = editorLengthArray[counter];
            counter++;

            editor.attachEventHandler("onkeydown", function(e) {
                e = (e == null) ? window.event : e;
                if (isAlphaNumericKey(e.keyCode)) {
                    var maxTextLength = editorList[editor.get_id()];

                    textLength = editor.get_text().length;
                    if (textLength >= maxTextLength) {
                        alert('You are not able to type more than ' + maxTextLength + ' symbols!');

                        e.returnValue = false;
                    }
                }
            });

            var element = document.all ? editor.get_document().body : editor.get_document();
            $telerik.addExternalHandler(element, "paste", function(e) {
                e = (e == null) ? window.event : e;

                var maxTextLength = editorList[editor.get_id()];
                textLength = editor.get_text().length;

                var clipboardLength = window.clipboardData.getData("Text").length;
                textLength += clipboardLength;
                if (textLength >= maxTextLength) {
                    alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                    e.returnValue = false;
                    return false;

                }
            });
        }

        function CalculateLength(editor, value) {
            var textLength = editor.get_text().length;
            var clipboardLength = value.length;
            textLength += clipboardLength;
            return textLength;
        }

        function OnClientPasteHtml(editor, args) {
            var maxTextLength = editorList[editor.get_id()];
            var commandName = args.get_commandName();
            var value = args.get_value();

            if (commandName == "PasteFromWord"
                || commandName == "PasteFromWordNoFontsNoSizes"
                || commandName == "PastePlainText"
                || commandName == "PasteAsHtml"
                || commandName == "Paste") {
                var textLength = CalculateLength(editor, value);
                if (textLength >= maxTextLength) {
                    alert('You are not able to type more than ' + maxTextLength + ' symbols!');
                    args.set_cancel(true);

                }
            }
        }     

    </script>

Hope to find a solution.

Many Thanks!

[Rumen]

Hi Reynald,

The custom code is not causing the problem. I tested it in a project without a stylesheet and the problem did not appear.

The scroll problem is most likely due to some global body tag on the page with the editor that is applying overflow: hidden; to the content area of RadEditor. To fix the problem set the CssFiles property to point to some empty css file and test again.
You can find more information in this help article: Content Area Appearance Problems.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[reynald lawrence]

Hi Rumen,

Yah, you're right, it seems that the external css had conflicts with the displaying of the RadEditor in my page, it automatically changes the overflow property to hidden.

Thank you.

Reynald