CodeMirror : how to limit height in editor

Question

I am using codemirror to show some code on a webpage. But when I initialize the codemirror editor, the height of the editor is way more than the number of lines in the code. Please see this fiddle or below image to understand what I am saying Below is the code to create 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 read codemirror doc but not able to figure out which property controls the height.

Please help me with this

Answer 1

The height can be set through CSS (by giving the .CodeMirror class a height property), or by calling the editor's setSize method.

If you want the editor height to correspond to the height of it's contents, see this demo.

Answer 2

If you see your fiddle, there is an entry in css which defines height.

.CodeMirror {


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

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

Answer 3

Might 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%");