CodeMirror With a Few Lines Don't Show Up Until Something Triggers a Repaint

Question

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.

Answer 1

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.

Answer 2

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.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/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>