Codemirror autoresists to a given number of rows

Question

I am trying to allow codemirror to log in to a given number of lines or pixel height. After reaching this maximum size, the widget should add scrollbars.

CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, viewportMargin: 50 

});

max-height does not work

 .CodeMirror { border: 1px solid #eee; height: 100%; } 

http://jsfiddle.net/qzjo4ejh/

Answer 1

You must specify a .CodeMirror a height: auto style and place max-height on .CodeMirror-scroll . The built-in editor on the project page does this (see the source, it is right at the top).

Answer 2

How about something like this:

 var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, viewportMargin: 50 }); var height; if(myCodeMirror.lineCount() > 5) { height = 50; } else { height = 20 * myCodeMirror.lineCount(); } myCodeMirror.setSize(500, height); 

This is an example. You can handle the event to dynamically resize your CodeMirror when changing strings.

Answer 3

This is what worked for me. CodeMirror-scroll caused it to be too large. You do not need to do anything with viewportMargin , despite the fact that the documents say.

 .CodeMirror { border: 1px solid #eee; height: auto; max-height:100px; } .CodeMirror-scroll { height: auto; max-height:100px; } 

Fiddle