Codemirror Autoresize bis zu einer bestimmten Anzahl von Zeilen

Question

Ich versuche, Codemirror Autoresize bis zu einer bestimmten Anzahl von Zeilen oder Pixelhöhe zu ermöglichen. Nachdem diese maximale Größe erreicht wurde, sollte das Widget Bildlaufleisten hinzufügen.

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

});

max-height funktioniert nicht

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

http://jsfiddle.net/qzjo4ejh/

Answer 1

Sie sollten .CodeMirror ein height: auto Stil geben und die max-height auf .CodeMirror-scroll setzen. Der eingebettete Editor auf der tut dies (Quelle anzeigen, es ist in der Nähe der Spitze).

Answer 2

Was ist so etwas wie das:

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); 

Dies ist ein Beispiel. Sie können ein Ereignis behandeln, um den CodeMirror dynamisch zu ändern, wenn sich Zeilen ändern.

Answer 3

Das hat bei mir funktioniert. Die CodeMirror-scroll verursachte, dass sie sich viel zu groß anpasste. Sie müssen nichts mit viewportMargin tun, trotz was die Dokumente sagen.

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

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

Fiddle