Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Textarea resize

Tags:

html

css

textarea

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.

like image 298
XCS Avatar asked Apr 02 '11 12:04

XCS


1 Answers

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.

like image 118
Freesnöw Avatar answered Sep 20 '22 06:09

Freesnöw