Ace editor's output is truncated and it scrolls up even if there is empty space at the bottom

Question

I am observing a strange behaviour (though to be honest, I don’t think I tested for this scenario).

I have set the height of ace editor to 500px. The text I have entered is around 60 lines. I see a scroll bar but the text occupies only around 70-80% of the editor. The space below is blank even though there is more text. See the picture below:

When I type something, though the cursor is at the bottom of the editor, the character gets typed at a higher location

I suppose there is a mismatch between the height of the ace-editor and the content within the editor. How could I align them?

Update

I notice that the top property of the textarea within the editor is changing as I scroll. I am not sure if this should happen as the textarea should stay fixed within the ace-editor element.

<textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" readonly="" style="border: 1px solid black; opacity: 0; font-size: 1px; height: 1px; width: 1px; **top: 458px;** left: 150px;"></textarea>

The top is initially 458px and as I scroll, it changes to 98px and even less if I keep scrolling. I am just sharing my observations here, I do not know how relevant they are.

Answer 1

When the size of the editor is changed by javascript after creating it, you need to call editor.resize() for editor to update its size.