CodeMirror: how to limit height in the editor

Question

I use codemirror to show code on a web page. But when I initialize the codemirror editor, the height of the editor is much greater than the number of lines in the code. Please see this script or below to understand what I'm saying. Below is the code for creating the codemirror editor.

var myCodeArea = document.getElementById("codeArea"); var myCodeMirror = CodeMirror(function(elt) { myCodeArea.parentNode.replaceChild(elt, myCodeArea); }, {value: myCodeArea.innerHTML, lineNumbers:true, mode:"javascript"}); 

I am reading a codemirror doc, but I cannot determine which property controls the height.

Please help me with this

Answer 1

Height can be set via CSS (by providing the .CodeMirror class a height ) or by calling the setSize editor setSize .

If you want the height of the editor to match the height of its contents, see this demo .

Answer 2

If you see your fiddle, there is a css entry that defines the height.

 .CodeMirror { /* Set height, width, borders, and global font properties here */ font-family: monospace; height: 300px; } 

You can either override this css or use the setSize (width, height) method codemirror.

Answer 3

May help someone.

 <textarea class="form-control" id="exampleTextarea"></textarea> 

.

 var config, editor; config = { lineNumbers: true, mode: "text/javascript", lineWrapping: true, htmlMode: true, matchClosing: true, indentWithTabs: true, readOnly: true }; editor = CodeMirror.fromTextArea(document.getElementById("exampleTextarea"), config); editor.setSize(900,"100%");