Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

resize textarea height to fit content

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
Hi,

I've hunted high and low and cannot find a solution to this.

I've played with
Code: 
var textarea = document.getElementById(ta);
textarea.style.height = (textarea.scrollHeight) + "px";
But that doesn't make it tall enough. I've looked at the '\n' split method but that still doesn't work, as it counts new line chars, what about lines that wrap?

I altered the above to be like this...
Code: 
    var textarea = document.getElementById(ta);
    textarea.style.height = (textarea.scrollHeight*2) + "px";
which works first time round (when height = null) but then it seems to double the height of the box with blank space.

I must be doing something stupid, so can someone tell me what it is please.

Cheers,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Sort by date Sort by votes
Upvote 0 Downvote
Where do you think I got my idea ;)

But it doesn't work!! that's the problem.

It doesn't work for lines that wordwrap?

How do I solve this as the height of the box and the required scroll seems to be based on newline characters not the real required scrolling size?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
Well... your first code snippet works perfectly for me in Fx 3.0.17 and IE 6.

If I load the following code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en" />
	<title>Textarea resizer</title>

	<script type="text/javascript">

		function resizeIt() {
			var textarea = document.getElementById('myText01');
			textarea.style.height = (textarea.scrollHeight) + 'px';
		};

	</script>
</head>

<body>
	<input type="button" value="Resize textarea to fit content" onclick="resizeIt();" />
	<form>
		<textarea id="myText01"></textarea>
	</form>
</body>

</html>

And then paste in the following text:

Code: 
a
b
c
d
e
f
g
h
i
j


k

l

then no matter how many times I press the button, the textarea is sized perfectly.

If you have no DOCTYPE, then a scrollbar will always appear. With the DOCTYPE, the scrollbar is always absent.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
try entering stuff without newlines, keep typing away like a paragraph of text, then you will see it doen't work.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
Dan's code works perfectly for me.
If you want the resizing to be in real time, just make the function run on the onkeyup event of the textarea.

Even letting the text wrap as you suggest works fine in both FF and IE8 for me.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
try entering stuff without newlines, keep typing away like a paragraph of text, then you will see it doen't work.
Click to expand...

Yes, it does. Again, in both IE 6 and Fx 3.0.17, entering the following (no new lines at all) and then pressing the button sizes the textarea no problem at all:

Code: 
jkh h kjh kjh kjh kjh k jkjjhkjh fkjfhg fgkjh fgkjshfg skjgh sfeoij di3io4 38 s jh4uh kjvn 4h sldn3o4hj jh ;k4jhoui4h kj4hkjh4 u4ho5h kj5th 35oh 5jh 35hu6ohgr jh5h65o h5kjh 35kjh35gheov 5jhdkjfghdkgh jfh kj fkjh fkjh5h kjh 5jh5 kjhk

Pressing the button repeatedly certainly does not grow the textarea any more.

If you are seeing something different (presumably you are, unless by "doesn't work" you mean something odd) perhaps you can mention which browser you are using, and the text you are testing with.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
sorry guys, i've not been clear regarding what i'm doing and my problem.

It's an AJAX application, which grabs notes from a DB and populates a textarea. There were two textareas next to each other and i'm trying to check which is tallest and make both the same.

in my code i was being an idiot trying to do
Code: 
    if(audit.style.height > textarea.style.height)

I forgot to parse the value as an integer due to the 'px' units before trying to use it in an expresion.

sorry to mess anyone about, it's woking fine now i'm doing it properly!

[hammer]

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
i've not been clear regarding what i'm doing and my problem.
Click to expand...

You're not wrong. Your real problem bore no resemblance to what I got from your description!

Good you got it sorted anyway.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
lol - yeah.

Though I also found another problem with this.

It only works if you first of all give the textarea element the focus, then check the scrollHeight.

But I got there in the end :)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
391
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
324
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
365
xwb
xwb
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
665
ggriffit
ggriffit
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
287
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top