Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Textarea to fit text

5:18 pm on Aug 2, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 6, 2006
votes: 0

How can I style a textarea so it expands to fit the amount of text in it? I tried height: auto and overflow: auto, but it will not fit the size of the text. Does anybody know what I should try?
5:47 pm on Aug 2, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
votes: 0

By textarea you mean a text input element, like the one I'm writing in now, right? (not what you see when you see my posts, but something the editor sees when they edit/make their own posts)

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]

8:18 pm on Aug 3, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 6, 2006
votes: 0

By textarea, I mean a textarea element, not an input element where the type attribute is text (if that's what you were wondering). I don't want it to expand horizontally, I just want the height to change. I do this so that I can show the text that is being edited in the context of the page where the text will change. It will be extremely simple WYSIWYG editing.

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.

5:33 pm on Aug 4, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
votes: 0

Textarea is an input.. like I was saying. It's the very same element used to make your posts here at webmasterworld.

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]

5:48 pm on Aug 4, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 17, 2005
votes: 0

Did someone say hard and silly?

How about soft and stupid :p

Had a play last night, seems to work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<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;
/*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;

<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;

<textarea wrap id="taID" onkeypress="taHeight()">
Sed hendrerit arcu ac est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

2:15 pm on Aug 13, 2007 (gmt 0)

New User

5+ Year Member

joined:Aug 13, 2007
posts: 3
votes: 0


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.


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members