ansaurus

Question

TEXTAREAs scroll by themselves (on IE8) every time you type one character

Answer 1

+2 A:

I ended up wasting a lot of time trying to figure out the answer myself, so I figured I'd save others the trouble of answering. The trick is to use a very large value for the COLS attribute on the TEXTAREA element. Like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<body> 
<div style="width: 80%"> 
<textarea rows="20" cols="5000" style="width:100%;" ></textarea> 
</div> 
</body> 
</html>

I also saw a workaround online to use a non-percentage width and then a percentage max-width and min-width, but that was much less impactful than the other workaround above (courtesy of Ross) which seems to work on all browsers including IE6.

more details: After an hour investigating this, the problem seems to be caused by IE8's handling of a conflict between "COLS" attribute and "width" style on a textarea element. If the width CSS is wider than the default width (font width x cols), IE8 gets confused when you add text and scrolls the textarea. If, instead, the width CSS is smaller than the default width derived from the cols attribute, then all works OK.

The subtle dependence between cols and width is perhaps what makes the problem so tricky to repro, because the same exact page would break or not break depending on the ratio of cols to width. The HTML in the quesiton actually reproes the bug on a large browser window and doesn't repro on a small one!

Justin Grant 2010-05-29 00:57:34

ansaurus

tags:

views:

answers:

TEXTAREAs scroll by themselves (on IE8) every time you type one character

related questions