I am in the process of implementing a dynamic textarea that resizes automatically, based on a technique discussed in this article: Alistapart: Expanding Textareas (2011).
The idea is quite straightforward: by using a pre element to mirror the input in the textarea, you can resize the pre element which will in turn resize its container and the absolutely positioned textarea. So far, this method has been successful for me in Chrome, Safari, and even Firefox after adjusting a small padding issue found on Stack Overflow.
However, I have encountered an issue with modern versions of Internet Explorer (9+). The key to making this technique work is ensuring that the pre element mirrors not just the size of the textarea, but also its font characteristics and wrapping points.
To demonstrate this issue, I have created a sample on JSFiddle.
In the demonstration, the content of the textarea is displayed in red while the content of the pre element is shown in blue. Ideally, the textarea's content should overlay the pre's content perfectly, displaying only the red text.
While this synchronization works well in Chrome and Safari, it becomes out of sync in IE as the text wraps after a certain point. For example, in IE 11, the string:
Here's some text. It appears to do weillustrates the problem:
We can only see the blue pre text on "we" because the textarea content has already wrapped.
Do you have any suggestions on how to keep the text synchronized between the textarea and the backing pre element in IE? Initially, I thought it might be related to differences in size or font, but after several attempts, it seems more like an inconsistent wrapping issue?
Although there are many JavaScript solutions available for resizing textareas, I was hoping to make this CSS approach work, if only for the learning experience.
Thank you in advance!