Forum Moderators: not2easy
Nothing ever expands to the width of the text in it. In html, just like new lines and page breaks in text documents, text is designed to be the one to accomodate to everything else.
Usually the length of text is huge, and it would be absolutely ridiculous to automatically adjust length, because it would keep growing and growing, until you hit the longest paragraph the person made (in which case they then hit enter, making a new line)
Why would you want this sort of thing anyways? you don't think it's annoying to have your text box increase in size all the time while you're typing?
[edited by: Xapti at 5:49 pm (utc) on Aug. 2, 2007]
I've accomplished the same effect before in a contenteditable div. The contents of the div are editable and the div resizes as the text is changed. I don't want the complexity of a contenteditable div. I just want the height of the textarea to be determined by the amount of text within it.
Can I style a textarea so that it will behave this way?
By the way, I realized that in my first post, I wrote overflow: auto which is the opposite of what I want it to do :). I then tried overflow: visible which did not work either.
When it comes to these text inputs type elements, they have fixed size, in the same way I described for width. Can't do anything about that, except maybe javascript, but it'd probably be hard to do, and pretty silly.
[edited by: Xapti at 5:41 pm (utc) on Aug. 4, 2007]
How about soft and stupid :p
Had a play last night, seems to work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>TextArea Height</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#taID {height:60px;width:250px;
/*overflow:hidden;*/
/*The above. No csroll bars, you could use this instead of the two below,
but if the text has no white space then the content to the right would be hidden*/
overflow-x:scroll; overflow-y:hidden;
}
</style>
<script type="text/javascript">
var taHeight = function () {
document.getElementById("taID").style.height = document.getElementById("taID").scrollHeight+"px";
}
if (window.attachEvent) window.attachEvent("onload", taHeight);
window.onload = taHeight;
</script>
</head>
<body>
<textarea wrap id="taID" onkeypress="taHeight()">
Sed hendrerit arcu ac est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</textarea>
</body>
</html>
Sorry, but I couldn't make it work as expected in IE 5.5 and IE 6.0 :(
2 Xapti:
Actually this feature is realized in PHPMyAdmin, where each textarea gets resized if text changed. But I couldn't understand - how.
