codemirror is empty when inside element with display:none

[frozeman]

when i have a textarea which is inside a div with display:none; the codemirror area is empty.

when i set the height of any div inside the codemirror div larger than the height of the codemirror div a scrollbar appears, (but the div is still empty) when i then scroll the conten appears.

i think it have to do with calculated size of the CodeMirror-gutter, which can not be done when its inside a display:none block.

[marijnh]

Did you try calling .refresh() after un-hiding the editor?

[frozeman]

i tried it but after everything was loaded.

i used it in a slide effect, so i would slide in and then call refresh.
could work.

another solution is not there or?

just giving it 100% or so? or copy the height of the textarea? (hm is alos not possible if its in a div with display none or?)

[frozeman]

another question.

is there a fix in sight for the cursor position when on a line ending?
it quite annoying :-)

[marijnh]

When display is none, no elements report any kind of valid width, height, or offset numbers, so CodeMirror can't lay itself out. Thus, after the display: none is removed (visibility: hidden, or being scrolled/clipped out of view is okay), you should call refresh to make it re-layout.

As for cursor position on a line ending, I don't know of any problem there. Please open a new issue with a more specific description of the problem (including the browser you're using).

[onmarx]

select the class of '.CodeMirror' and instance the object for refresh when change size

For example in my case I want to click a button to add and remove an 'active' class to make the content of CodeMirror appear and disappear.

.CodeMirror {
  border-radius: 3px;
  margin: 10px 0 8px;
  padding: 5px;
  width: 100%;
  height: auto;
  display: none;
}

.CodeMirror.active {
  display: block;
}

CodeMirror Object

const editor = CodeMirror.fromTextArea(textarea,{
    lineNumbers:true,
    tabSize:4,
    theme: 'material',
    mode:"javascript",
    readOnly: true,
  });

Event of btn

    btn.addEventListener('click', showCode)

Solution

function showCode () { 
  const editor= document.querySelector('.CodeMirror')
  editor.classList.toggle('active')
  
  // use the object for refresh CodeMirror 
  editor.CodeMirror.refresh()
}