CodeMirror seems to be working really well except when I have only a few (3 or less) lines of code in the textarea. When that happens, the textarea is blank until I (A) hit enter in the textarea or (B) do something that causes the browser to repaint (like resizing). When there are more than 3 lines, they show up just fine on first render of the page.

I'm not doing anything fancy here:

var editor = CodeMirror.fromTextArea(document.getElementById('html'), {
    mode: 'text/html',
    tabMode: 'indent',
    lineNumbers: true
});

Just wondering if anyone else has had this issue.

CodeMirror seems to be working really well except when I have only a few (3 or less) lines of code in the textarea. When that happens, the textarea is blank until I (A) hit enter in the textarea or (B) do something that causes the browser to repaint (like resizing). When there are more than 3 lines, they show up just fine on first render of the page.

I'm not doing anything fancy here:

var editor = CodeMirror.fromTextArea(document.getElementById('html'), {
    mode: 'text/html',
    tabMode: 'indent',
    lineNumbers: true
});

Just wondering if anyone else has had this issue.

• javascript
• codemirror

• I'm having that trouble with codemirror 2.34, both when created from a <textarea> and when constructed fresh using the "new CodeMirror(node)" approach. This question is over a year old, but do you remember if you found what the problem was? – Neek Commented Oct 26, 2012 at 10:48
• Nope. And we've since lost the need for it all together. – Gregg Commented Oct 26, 2012 at 13:48
• I met the same issue, but only use refresh to work around. – seanxiaoxiao Commented Jul 8, 2013 at 17:33
• Can you share jsFiddle for the same, I will be able to help as this may be related with Loading events.. – MarmiK Commented Jul 16, 2013 at 6:18
• I had the same issue and also use the refresh method to work it around. But you can associate it to an onBlur event on the textarea. – Luciano Camilo Commented Jul 17, 2013 at 1:12

2 Answers 2

Use the refresh method after creating the CodeMirror instance... editor.refresh() It happened to me when trying to insert an editor within a dijit.Dialog when I was yet hidden. It did the trick for me.

I setup a scenario which had no issue in Chrome using 0 to 2 lines of code a couple of different ways.

I directly linked to codemirror for the includes.

Do you have latest version?

What environment are you having issue with?

Perhaps is it browser specific issue?

<link rel="stylesheet" href="http://codemirror/lib/codemirror.css">
<script src="http://codemirror/lib/codemirror.js"></script>
<script src="http://codemirror/addon/fold/foldcode.js"></script>
<script src="http://codemirror/addon/fold/foldgutter.js"></script>
<script src="http://codemirror/addon/fold/brace-fold.js"></script>
<script src="http://codemirror/addon/fold/xml-fold.js"></script>
<script src="http://codemirror/mode/javascript/javascript.js"></script>
<script src="http://codemirror/mode/xml/xml.js"></script>

<textarea id='someID1'></textarea>

<textarea id='someID2'>
    <table><tr><td>The wheels on the bus go round and round.</td></tr>
    </table>
</textarea>

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById('someID1'), {
        mode: 'text/html',
        tabMode: 'indent',
        lineNumbers: true
    });

    CodeMirror.fromTextArea(document.getElementById('someID2'), {
        mode: 'text/html',
        tabMode: 'indent',
        lineNumbers: true
    });
</script>