During my HTML/CSS/JS coding session, I encountered a challenge with CodeMirror version 5.62.3. Specifically, I was striving to make the scrollbar visible in the code editor, using C# as the language mode. However, despite setting the editor's height to 100% for consistency with the HTML document size, the scrollbar appeared static and non-functional. This rendered scrolling impossible, leaving me puzzled.
I speculated if this issue stemmed from an unstable release of CodeMirror or a browser glitch. The problem extended beyond the unresponsive scrollbar to ineffective line wrapping and overall editor sizing discrepancies. Despite consulting various documentation sources, I failed to comprehend CodeMirror\'s functionality fully or find satisfactory solutions.
To aid in diagnosing this complication, I provide the complete HTML page below. Adjustments had been made to hide irrelevant content under the project alias "something".
<!DOCTYPE html>
<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-csharp",
lineNumbers: true,
indentUnit: 4,
tabSize: 4,
theme: "monokai",
lineWrapping: true,
value: `// Welcome to something!\n// something allows you to test out C# and MSIL online.\n\n// x is supported!\n// You can run x and x for fully free.\n\// You can do so by going into the gear icon on the right.\n\n// something is still in beta!\n// So expect some classes, methods, or properties not yet to be implemented.
\n// Note: something is not any associated with Microsoft.\n\n// Happy coding! :)\n\nusing System;\n\nnamespace Solution1\n{\n internal sealed class Program\n {\n internal static void Main(string[] args)\n {\n Console.WriteLine("Demo test app!");\n Environment.Exit(0);\n }\n }\n}`
});
editor.setSize("50%", "100%");
</script>
</body>
</html>Despite efforts, attempts to scroll within the editor yielded no results. To address concerns about my setup, I confirm that I am running Google Chrome version 116 and do not leverage Node.js for operations, opting instead for CDN-based JavaScript libraries.
If anyone can assist or offer suggestions, it would be greatly appreciated.
Sincerely, -winscripter.