Codemirror自动调整到给定数量的行

Question

I'm trying to allow codemirror to autoresize up to a given number of lines or pixel height. After this max-size is reached the widget should add scrollbars.

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

});

max-height is not working

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

http://jsfiddle.net/qzjo4ejh/

Answer 1

You should give .CodeMirror a height: auto style, and put the max-height on .CodeMirror-scroll . The embedded editor on the project page does this (view source, it's right near the top).

Answer 2

What about something like that :

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 an event to dynamically resize your CodeMirror when lines change.

Answer 3

This is what worked for me. The CodeMirror-scroll was causing it to size itself way too big. You don't need to do anything with viewportMargin despite what the docs say.

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

.CodeMirror-scroll {
    height: auto;
    max-height:100px;
}

Fiddle