homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Textarea to fit text

5+ Year Member

Msg#: 3411709 posted 5:18 pm on Aug 2, 2007 (gmt 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?



WebmasterWorld Senior Member 5+ Year Member

Msg#: 3411709 posted 5:47 pm on Aug 2, 2007 (gmt 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]


5+ Year Member

Msg#: 3411709 posted 8:18 pm on Aug 3, 2007 (gmt 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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 3411709 posted 5:33 pm on Aug 4, 2007 (gmt 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+ Year Member

Msg#: 3411709 posted 5:48 pm on Aug 4, 2007 (gmt 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.


5+ Year Member

Msg#: 3411709 posted 2:15 pm on Aug 13, 2007 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved