Recommended styles for editor's container div?

[pm64]

I want to render the component such that it occupies the entire area of a specific div in my app. This div shrinks and grows as the window resizes, and the component should resize accordingly, always visibly occupying the full space of the div.

Without any additional styling, after adding a new line of text to the editor, each subsequently entered character results in the addition of an enormous amount of blank vertical space (watch what happens to the scrollbar as characters are typed into line 2 in the animation below). Before long, the document is followed by so much blank space that the vertical scrollbar thumb reaches its minimum size.

Something about full screen fixes this. For example, had I embedded this component in an iframe instead of a div, and used the component's full screen mode ("full iframe mode" here, I suppose), the document would always have the expected vertical length as text is entered.

I don't believe there's any issue with this component or CodeMirror, I'm just struggling to grok the CSS. I know there's a way to set up the div container, and style .cm-editor etc., in a way that makes the editor maintain the expected height.

Maybe someone has solved this problem or has some insight?

[gaelj]

Yes I already noticed this kind of issue..

I'll look into making the layout more resilient, or at least provide working examples.

Remember you can pass standard html properties such as class and style and they will get applied to the div in the wrapper.

Does setting ScrollPastEnd=false change anything ?

[gaelj]

After checking some more, ScrollPastEnd does not work if the containing div does not have a set height (source: the official CM 6 documentation), as it tries to add blank lines at the end of the document to fill it to the whole height. So if no height is set, it will keep on adding more blank lines indefinitely. You can set the height via the recently added Height / MaxHeight properties, which expect CSS-style values (for example 100vh, calc(100vh - 8em), 100em, 500px, 100%, etc)
Full screen mode enables the cm-full-screen CSS class which sets height: 100vh.
Let me know if you have the problem without ScrollPastEnd enabled or with it enabled and with a fixed height.

[pm64]

Hey @gaelj, makes perfect sense.

As you'd expect, setting ScrollPastEnd=false does make this issue go away.

I'll experiment with different ways of expressing the height of the editor when using ScrollPastEnd=true and report back if any unusual findings.

Thanks as always!