How to refresh codemirror when it's parent div style becomes display block?

javascript codemirror
Pierre picture Pierre · Apr 30, 2012 · Viewed 13.3k times · Source

I'm using codemirror with textareas in a tabbed interface, when i'm not in the tab that contains codemirror and then go to it, I get empty white space without line numbers or the cursor, when I refresh the page it works, I know it's because the tabs content is hidden using display: none; so how can I fix this issue ?

here's my code, (I'm also using jquery):

var editor = CodeMirror.fromTextArea(document.getElementById($this.attr('id')), {
        lineNumbers: true,
        mode: text/html,
        enterMode: "keep",
        tabMode: "shift"
    });

    $(editor.getScrollerElement()).width(300);
    width = $(editor.getScrollerElement()).parent().width();
    $(editor.getScrollerElement()).width(width);
    editor.refresh();

thanks in advance.

Answer

Marijn picture Marijn · May 1, 2012

Make sure you also call refresh when switching to the tab that contains the editor.

Related questions

How to get the value of Codemirror textarea

I am using Codemirror's plugin for textarea but I am not able to retrieve the value of textarea. Code: var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, matchBrackets: true, mode: "text/x-csrc" }); function showCode() { var text = editor.mirror.getCode(); …

Read More
How can I set the value of a CodeMirror editor using Javascript?

I try to set id4 in the following code: <div id="id1"> <div id="id2"> <div id="id3"> <textarea id="id4"></textarea> </div> </div> </div&…

Read More
When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery

The App: I have a textarea element in my page. It is transformed using CodeMirror, because I need to indent and highlight html code withing it. Pic is in the link: [textarea using codemirror] http://uploadingit.com/file/gxftd2cps9…

Read More