Search code examples
javascripthtmlcssscrollbarcodemirror

CodeMirror 5.62.3: Issues with the scrollbar, size of the editor, and line wrap

The issue I'm facing with CodeMirror version 5.62.3 is, I want the scrollbar to appear. However, the size of the editor is a little unexpected, as I wanted its height to be 100% (so that the same size as the HTML document) and it doesn't look like 100% at all, and the scrollbar does show, but it is completely static. So when I try to scroll, it's never scrolling.

HTML/CSS:

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/monokai.min.css">
        <title>something</title>
        <style>
            .CodeMirror {
                line-height: 28px;
                font-family: Lucida Console;
                overflow: auto;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="editor"></div>
        <script>
            var editor = CodeMirror(document.getElementById("editor"), {
      mode: "text/x-js",
      lineNumbers: true,
      indentUnit: 4,
      tabSize: 4,
      theme: "monokai",
      lineWrapping: true,
      value: '// This is a sample comment.\nfunction sampleRecord(x, y) {\n    this.x = x;\n    this.y = y;\n}\nconsole.log("Hello, World!");\n// Some extra lines to make the scrollbar longer\n\n\n\n\n\n\n\n// test'
    });
    editor.setSize("50%", "100%");
        </script>
    </body>
</html>

Try scrolling and using the scrollbar in the editor - attempting to scroll does not do anything. Is there any way to solve this issue?

I'm using the latest version of Google Chrome - chrome 116.

I appreciate any help or suggestions.

Also, it's important to mention that I'm not using Node.js. For example, I load all JavaScript libraries via a CDN.

Solution

  • After lots of debugging, I found the issue.

    This:
    editor.setSize("50%", "100%");
    is not correct. I thought "100%" means the size of the HTML document, but that's not correct. To yield the same effect, we need to use 100vh instead:

    editor.setSize("50%", "100vh");

    And remove overflow: auto in CSS.