CodeMirror. Turn off vertical scrollbar

Question

I am currently using CodeMirror to edit CODE in the text area in a browser. If I have more than 20 lines of code, a vertical scrollbar to the right is added. But I do not need this scroll bar. Instead, I need the editor to grow vertically.

Can anyone help?

Answer 1

CodeMirror 3 has the option to disable scrollbars: scrollbarStyle: "null"

From the documentation:

scrollbarStyle: string

Selects a scroll implementation. The default value is "native", showing its own scrollbars. The core library also provides a “null” style that completely hides scrollbars. Addons can implement additional scroll models.

Combining this with:

• automatic height: height: auto and viewportMargin: Infinity (example: http://codemirror.net/demo/resize.html )
• wrapping lines: lineWrapping: true

And then controlling the height / width of the parent div works well

Answer 2

CodeMirror doco talks about the CodeMirror-scroll style, which determines whether the scroll bar appears and whether the text area expands to fit the content. In particular, he says:

Scroll CodeMirror Does the editor scroll (overflow: auto + fixed height). By default this is done. Setting the CodeMirror class to height: auto and providing this class overflow-x: auto; overflow-y: hidden will resize the editor according to its contents.

So the idea is to add something like: to your own CSS:

 .CodeMirror { border: 1px solid #eee; height: auto; } .CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; } 

as shown here in the official demo that accompanies the code scroll style documentation .

What worked for me:

For my personal situation using CodeMirror 2.34, all I did was add the following style to my own stylesheet:

 div.CodeMirror-scroll { height: auto!important; overflow: visible; } 

CodeMirror 3:

In my brief initial CodeMirror 3 test, both of the above methods did not work, and I still have scrollbars. It is interesting, since you think that the official doco on the topic will be valid - if CodeMirror 3 does not change its styles a little, and doco has not yet caught up ...