Code textarea should be larger and move when scrolling

[kieranclancy]

When writing a long document, such as http://mathb.in/1, you can no longer see the bottom of the content as you write, because the textarea sits at the top of the page while the new content is previewed below the visible window area.

It would be much better if:

1. The code textarea expanded to fill as much space as possible inside the window.
2. The code form including the textarea moved with the window

That way, as you scrolled down a long page, the textarea would move with it and always be as large as possible (until reaching the top or bottom where it would need to be a bit shorter).

[chid]

2. is hard because the textarea content is not going to be aligned with the formatted content

[kieranclancy]

By (2) I didn't mean that it should be aligned, just that it should be absolutely positioned, so when you scroll down, the code form stays in the same place. It'll be up to the user to scroll to the right place in the window and align what they're typing.

[chid]

Fair enough, sounds good. :+1:

[chid]

How is

var el = document.getElementById("code");
el.onkeyup = function() {  
  el.style.height = 'auto';
  el.style.height = a.scrollHeight+'px';
  el.style.overflow = 'hidden';
}; 

resizes to content

[susam]

The textarea is resizable in most modern browsers. Please resize the textarea to suit your needs as the length of the rendered content becomes too long.