CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer
thauburger
thauburger

Reputation: 4195

Force textarea and pre elements to be same size and wrap at the same points in IE.

I'm currently trying to implement an auto-resizing textarea, based on the popular technique found here: Alistapart: Expanding Textareas (2011).

The concept is pretty simple: you mirror a textarea's input with a backing pre element. As the pre element resizes, its container and the absolutely positioned textarea grow with it. This is working well for me in Chrome, Safari, (and after a small padding tweak here) Firefox as well.

I've run into a problem, however, in modern versions of IE (9+). The key to this technique is to make sure that the pre element exactly mirrors the textarea's behavior - not only in size, but also in font characteristics, and wrapping points.

I've set up this JSFiddle to demonstrate.

The textarea's content is in red, while the pre's content is in blue. Ideally, the textarea's content would sit directly on top of the pre's content, and only allow us to see red text.

This works great in Chrome/Safari, but as you start playing around in IE, the text gets out of sync after the first wrapping point or so. In this demo, the string:

Here's some text. It appears to do we

should illustrate the issue (IE 11):

IE Bug

We only see the blue pre text on "we" because the textarea content has already wrapped.

Any ideas how I can keep the text in sync between the textarea and backing pre element in IE? My initial thought was that it had something to do with size / font discrepancy, but after a few days of trying things, it seems more like an inconsistent wrapping issue?

I've come across lots of javascript solutions for resizing the textarea, but I was hoping to get this CSS approach to work, if nothing more than for the learning.

Thanks in advance!

Upvotes: 2

Views: 307

Answers (1)

Aleksander Bavdaz
Aleksander Bavdaz

Reputation: 1346

Your problem is that the short-hand font rule is not being honored in IE. If you take a look at it in IE's style inspector you will see it being underlined, at least in IE11. Simply adding a space between the font size and font family values fixes that. See updated JSFiddle.

For IE

font: 400 1em'Helvetica', 'Arial', sans-serif;

should be

font: 400 1em 'Helvetica', 'Arial', sans-serif;

The single quotes are optional unless the fonts name has spaces in it or is a CSS keyword.

The wrapping problem should be eliminated but I don't think you can completely hide the underlying pre's text like in WebKit browsers (Chrome/Safari), that's why the article you linked suggests you actually make it invisible.

.expandingArea.active > pre {
  display: block;
  /* Hide the text; just using it for sizing */
  visibility: hidden;
}

You should add that.

Upvotes: 1

Related Questions