11

I need to use a textarea to show some text. The problem is that if I place 4-5 rows of text a scrollbar will appear. How can I use CSS/HTML so that the textarea will be as large as it's content (no scrollbar).

  • the textarea doesn't need to change it's size dynamicaly, I use it only to show a text (I could also use a disabled textarea)

  • I want the textarea to stretch only verticaly.

If you want to know:
I use the textarea to show some text from a database, so when the textarea (with the text in it) is created, it should show the whole text at once with no scrollbars.

Improve this question
1
  • 1
    The whole point of a textarea is for let the user enter text. If you want to show text, use an element with appropriate semantics (maybe div, p or pre). Commented Apr 3, 2011 at 14:42

9 Answers 9

Reset to default
12 
<!DOCTYPE html> <html> <head> <title>autoresizing textarea</title> <style type="text/css"> textarea { border: 0 none white; overflow-y: auto; padding: 0; outline: none; background-color: #D0D0D0; resize: none; } </style> <script type="text/javascript"> var observe; if (window.attachEvent) { observe = function (element, event, handler) { element.attachEvent('on'+event, handler); }; } else { observe = function (element, event, handler) { element.addEventListener(event, handler, false); }; } function init (maxH) { var text = document.getElementById('text'); var maxHeight=maxH; var oldHeight= text.scrollHeight; var newHeight; function resize () { text.style.height = 'auto'; newHeight= text.scrollHeight; if(newHeight>oldHeight && newHeight>maxHeight ) { text.style.height=oldHeight+'px'; } else{ text.style.height = newHeight+'px'; oldHeight= text.scrollHeight; } } /* 0-timeout to get the already changed text */ function delayedResize () { window.setTimeout(resize, 0); } observe(text, 'change', resize); observe(text, 'cut', delayedResize); observe(text, 'paste', delayedResize); observe(text, 'drop', delayedResize); observe(text, 'keydown', delayedResize); text.focus(); text.select(); resize(); } </script> </head> <body onload="init(200);"> <textarea rows="1" style="height:1em;" id="text"></textarea> </body> </html>

http://jsfiddle.net/TDAcr/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Brilliant, Amin! I feel like I've struck gold on the internet by finding this. You deserve way more than four votes, but I only have the one vote I can give you.
6

Alright, I just found this and it works very nicely:

<html> <head> <script> function textAreaAdjust(o) { o.style.height = "1px"; o.style.height = (25+o.scrollHeight)+"px"; } </script> </head> <body> <textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea> </body> </html>

Now, I shouldn't assume that you know Javascript (but you might).

Just run 

textAreaAdjust(document.getElementById("id of your text area"))

Something like that should work. I'm not the best with Javascript (not even close, I just started using it the other day)

That seems to do something similar to what you want. The first code example is for a textarea that dynamically changes based on what is in it (while typing). It will take a couple of changes to get it how you want.

Improve this answer

4 Comments

I know javascript but I don't want to use it here. Also, I said the textarea doesn't have to be editable, or change it's size while writing in it. It just needs to show the entire text in it(when the page loads) without a scrollbar.
I know C++, I could also create that macro but... Where's the fun? xD
Lots and lots. It's better to create a clean written site instead of working with a hacked up thing. Especially when dealing with clients.
It's my personal site. I always think: "ok, the bad is done; I'll make the next website twice as better!"
5

I´m afraid you´ll have to resort to javascript to set the height of your textarea. You can use the scrollHeight property to determine the total height.

Alternatively you could just use a div and style the div to look like a textarea. The div will grow automatically and as it´s a disabled textarea anyway, you don´t really need it to be a textarea.

Improve this answer

Comments

1

You could use the CSS height: and width: attributes, e. g. something like <textarea style="width:400px;height:300px">...</textarea>, just use the sizes you want to.

In addition, if you want to suppress the scrollbar, use overflow:hidden.

Improve this answer

1 Comment

The problem is that the text shown has variable size, so I can't say "width:300px;" . One textarea can be 200px tal and another can be 800px ...
1

you can use div like textarea. It is possible like this:

<div contenteditable="true" style="width:250px; border:1px solid #777" ></div
Improve this answer

Comments

0

Find the height of the font you will most likely be displaying it in. I'm not sure about CSS/HTML but you could use Javascript/PHP/ASP.net to use map to determine how big the text will be based on the number of characters. If you do it in a monospaced font, this will be even easier. Why use a text area when you could just use a label which will do the same thing all by itself?

Improve this answer

4 Comments

I use a textarea because it's a website I've made some time ago, and then I did it using textarea, I can't change that. I mean, when you type in a div, span, the div auto-resizes. Can't I "activate" that autoresize in textarea too?:D
Well, each control is made to do different things. Textareas are purposely made so that they don't resize. What is the reason that your are required to use the textarea?
Because I've created a website a year ago, that let's you add some Advertisments (containing text). Back then I dit it using textareas, and now I want to change a bit the way they look. I don't want to go through all the adverts already posted and replace the "textarea" with a div.
Oh, ok. I've never really made a html/css only site before. All of my stuff is asp.net and it's all single page changes. Oh well :) Try y other solution I posted.
0

If you don't mind using JavaScript you can use approach from one of following articles: http://james.padolsey.com/javascript/jquery-plugin-autoresize/ http://scvinodkumar.wordpress.com/2009/05/28/auto-grow-textarea-doing-it-the-easy-way-in-javascript/

But from your questing I assume you want pure CSS solution. Then you can just mimic appereance of textarea using simple div and following css (if you just want to display text): 

div { cursor: text; background: lightGray; border: 1px solid gray; font-family: monospace; padding: 2px 0px 0px 2px; }
Improve this answer

2 Comments

The "bad" is already done. I've used textarea in the pages I've created before and I want to do this to all of them without changing anything to the page, only changing the CSS filme
It's impossible with CSS (even with CSS3). You have to resort to using of little piece of JavaScript.
0

I assume name attribute is not used. You can use this alternative (HTML5):

http://jsfiddle.net/JeaffreyGilbert/T3eke/

Improve this answer

1 Comment

Wtf? Every time I press enter in the div, something odd happenes :)) It creates another div inside that one.
0

Using the resize property works these days:

resize: none;

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.