How to update codemirror when the parent div style becomes the display block?

Question

I use codemirror with text fields in a tabbed interface, when I’m not on the tab containing codemirror and then go to it, I get empty white space without line numbers or cursor, when I refresh the page it works, I know this because the contents of the tabs hidden by display: none; so how can i fix this problem?

here is my code, (I also use 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(); 

early.

Answer 1

Make sure you also call refresh when you switch to the tab containing the editor.

Answer 2

Try this :

 // Refresh CodeMirror $('.CodeMirror').each(function(i, el){ el.CodeMirror.refresh(); }); 

Answer 3

You can use the autorefresh addon:

display /autorefresh.js

This add-on can be useful when initializing the editor in a hidden DOM node, in cases where it is difficult to invoke an update when the editor becomes visible. It defines the autoRefresh parameter, which can be set to true to ensure that if the editor was not visible during initialization, it will be updated the first time it is displayed. This is done by polling every 250 milliseconds (you can pass a value, for example {delay: 500}, as a parameter value to configure this). Please note that this add-on will only update the editor once when it first becomes visible, and will not worry about further restyling and resizing.

You just need to add the JS library and set autoRefresh to true :

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