dynamically resizing height of textarea of known width

Discussion in 'Javascript' started by gilbert.george@whoever.com, Mar 12, 2007.

  1. Guest

    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
     
    , Mar 12, 2007
    #1
    1. Advertising

  2. Ivo Guest

    <> 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/
     
    Ivo, Mar 12, 2007
    #2
    1. Advertising

  3. Guest

    On 12 Mar, 17:06, "Ivo" <> wrote:
    > <> 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?
     
    , Mar 12, 2007
    #3
  4. Guest

    On 12 Mar, 18:32, wrote:
    > On 12 Mar, 17:06, "Ivo" <> wrote:
    >
    >
    >
    > > <> 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
     
    , Mar 12, 2007
    #4
  5. Evertjan. Guest

    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)
     
    Evertjan., Mar 12, 2007
    #5
  6. Guest

    On 12 Mar, 19:43, "Evertjan." <> 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
     
    , Mar 12, 2007
    #6
  7. Evertjan. Guest

    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)
     
    Evertjan., Mar 12, 2007
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. honcho
    Replies:
    3
    Views:
    6,131
    honcho
    Jul 15, 2005
  2. Replies:
    4
    Views:
    1,863
    Babu Kalakrishnan
    Oct 5, 2004
  3. Lois
    Replies:
    1
    Views:
    3,302
    Ryan Stewart
    Dec 27, 2004
  4. cera
    Replies:
    1
    Views:
    1,299
    Neredbojias
    Aug 18, 2007
  5. Bernd Meier
    Replies:
    6
    Views:
    529
    GTalbot
    Jan 14, 2008
Loading...

Share This Page