Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > dynamically resizing height of textarea of known width

Reply
Thread Tools

dynamically resizing height of textarea of known width

 
 
gilbert.george@whoever.com
Guest
Posts: n/a
 
      03-12-2007
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

 
Reply With Quote
 
 
 
 
Ivo
Guest
Posts: n/a
 
      03-12-2007
<(E-Mail Removed)> typed
> 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/


 
Reply With Quote
 
 
 
 
gilbert.george@whoever.com
Guest
Posts: n/a
 
      03-12-2007
On 12 Mar, 17:06, "Ivo" <(E-Mail Removed)> wrote:
> <(E-Mail Removed)> typed> 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
> 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?

 
Reply With Quote
 
gilbert.george@whoever.com
Guest
Posts: n/a
 
      03-12-2007
On 12 Mar, 18:32, (E-Mail Removed) wrote:
> On 12 Mar, 17:06, "Ivo" <(E-Mail Removed)> wrote:
>
>
>
> > <(E-Mail Removed)> typed> 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
> > 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?


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

 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      03-12-2007
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";


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
gilbert.george@whoever.com
Guest
Posts: n/a
 
      03-12-2007
On 12 Mar, 19:43, "Evertjan." <(E-Mail Removed)> wrote:
> 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";
>
> --
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)


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


 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      03-12-2007
wrote on 12 mrt 2007 in comp.lang.javascript:

>> > 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";
>> > }

[..]
>
> 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?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Why can't I change height with <col width="50" height="100">? Bernd Meier HTML 6 01-14-2008 07:25 AM
CSS question: Using height/width at 100% with fixed-width borders/margin/padding cera HTML 1 08-18-2007 02:59 AM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM
Textarea's Height and Width not Sent to Firefox honcho ASP .Net 3 07-15-2005 02:15 PM
CSS min-width, max-width, and min-height with display:inline Lois HTML 1 12-27-2004 03:03 AM



Advertisments