代码镜像。 禁用垂直滚动条

Question

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

Can anyone help ?

Answer 1

In CodeMirror 3, there is an option to disable the scrollbars : scrollbarStyle: "null"

From the documentation :

scrollbarStyle: string

Chooses a scrollbar implementation. The default is "native", showing native scrollbars. The core library also provides the "null" style, which completely hides the scrollbars. Addons can implement additional scrollbar models.

Combining this with :

• automatic height: height: auto & 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

The CodeMirror doco talks about a style CodeMirror-scroll which controls whether a scrollbar appears, and whether the textarea expands to fit the content. Specifically it says:

CodeMirror-scroll Whether the editor scrolls (overflow: auto + fixed height). By default, it does. Setting the CodeMirror class to have height: auto and giving this class overflow-x: auto; overflow-y: hidden; will cause the editor to resize to fit its content.

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

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

as illustrated here in the official demo that accompanies the documentation on the style CodeMirror-scroll .

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 testing of CodeMirror 3, both the above techniques didn't work and I still got the scrollbars. Interesting, since you'd think the official doco on subject would be valid - unless CodeMirror 3 has changed its styles a bit and the doco hasn't caught up yet...

Answer 3

For me wrapping codemirror textarea on an element with display:flex , fixed the unwanted horizontal scroll issue:

<div style='display: flex'>
  <textarea></textarea>
</div>
<script>
//codemirror setup
</script>