Editor only shows all content after a click on the it. How to solve it?

The following gif file is showing problem. You can see the below content display after the mouse become a circle(this is a mouse click). The below content is there but doesn’t display.

code-mirror3

This is my markdown editor and previewer demo. I cover the default height:300px in .CodeMirror by using height: auto and a fix height container.

The most weird thing is that the height of showing content part is 300px. It matches the default height of code mirror if i remove the height: 100% in my styles.css.

I have two problem need to figure out:

  • Is there any better way to setting height of the editor, not the default height: 300px?
  • How to solve the problem about showing content in editor as the title says?

Thx!!

I have just found a solution. The may cause a performance problem if the source is big enough.Set the viewportMargin to 1000 is enough for me.