dynamically resizing height of textarea of known width

[gilbert.george]

Hi,

I am setting the width of a textarea using the style.width to ensure
the textarea is exactly the right width.

I want to set the height/rows of the textarea depending on it's
contents (so that it dynamically grows and shrinks as the contents
alter) however I can not see a way to calculate the required number of
rows (or height) for a given content string.

If all the lines of content are shorter that than the width of the
area then it's simple but obviously this is not always the case, so I
have a function that splits the content into lines then each line into
single words and iterates thro adding words to a tmp string whose
width (not length) i then want to compare with the width of the
textarea however I cant see how I can do that.

I tried to use the number of cols and the length of the string but
the number of cols is not set when the style.width is set.

Anyone have any advice on how to go about this?

G

 

[Ivo]

I am setting the width of a textarea using the style.width to ensure
the textarea is exactly the right width.

I want to set the height/rows of the textarea depending on it's
contents (so that it dynamically grows and shrinks as the contents
alter) however I can not see a way to calculate the required number of
rows (or height) for a given content string.

If all the lines of content are shorter that than the width of the
area then it's simple but obviously this is not always the case, so I
have a function that splits the content into lines then each line into

<snip>

Instead of measuring the text, compare the offsetHeight and scrollHeight of
the textarea. If the scrollHeight is the larger, you know you need to
increase the area's size.
hth
ivo
http://4umi.com/web/javascript/

 

[gilbert.george]

<snip>

Instead of measuring the text, compare the offsetHeight and scrollHeight of
the textarea. If the scrollHeight is the larger, you know you need to
increase the area's size.
hth
ivohttp://4umi.com/web/javascript/

thanks for that, i now have far simpler code

text_area.style.height = text_area.scrollHeight + "px";

as i want to have the area fit the contents not just increase when it
grows (ie shrink when the contents decrease)

this works fine in IE but in FF it makes the text area grow with each
char added not every row.

any ideas why?

 

[gilbert.george]

thanks for that, i now have far simpler code

text_area.style.height = text_area.scrollHeight + "px";

as i want to have the area fit the contents not just increase when it
grows (ie shrink when the contents decrease)

this works fine in IE but in FF it makes the text area grow with each
char added not every row.

any ideas why?

a-ha

this code does what i want

if(isIE()) {
text_area.style.height = text_area.scrollHeight + "px";
} else {
text_area.style.height = 0;
text_area.style.height = (text_area.scrollHeight -2) + "px";
}

thanks for the help

 

[Evertjan.]

wrote on 12 mrt 2007 in comp.lang.javascript:

this code does what i want

if(isIE()) {
text_area.style.height = text_area.scrollHeight + "px";
} else {
text_area.style.height = 0;

What is the sense of the above line?
It surely will be overwritten in the next line?

text_area.style.height = (text_area.scrollHeight -2) + "px";
}

thanks for the help

this should do the trick:

text_area.style.height =
text_area.scrollHeight - ((isIE())?0:2) + "px";

 

[gilbert.george]

wrote on 12 mrt 2007 in comp.lang.javascript:



What is the sense of the above line?
It surely will be overwritten in the next line?



this should do the trick:

text_area.style.height =
text_area.scrollHeight - ((isIE())?0:2) + "px";

it appears that this line

text_area.style.height = 0;

is required to reset the scrollHeight to the minimum necessary to
avoid the need for a scrollbar.

without it the scrollHeight never decreases in value irrespective of
how the contents of the textarea change.

hope that makes sense

 

[Evertjan.]

wrote on 12 mrt 2007 in comp.lang.javascript:

What is the sense of the above line?
It surely will be overwritten in the next line?

[..]

it appears that this line

text_area.style.height = 0;

is required to reset the scrollHeight to the minimum necessary to
avoid the need for a scrollbar.

without it the scrollHeight never decreases in value irrespective of
how the contents of the textarea change.

hope that makes sense

It certainly does. Good point.

text_area.style.height = 0; // remove at your peril!!

Is this hat tric valid for reasonably all non-IE browsers?