TextArea creates too much space. How to make it confined to the size of the object?

Question

I have a textarea like this:

<Form.TextArea fluid label='ADI' value = {cmsObj.ADI} rows={rows} cols="10"  />

It is calculating size with my function:

 calculateRows(text){
    if(!text)
        return 1;

    return  Math.ceil(text.length/10);
  }

This function creates enough space, but unfortunately it allocates too much space. There is a lot of white space after the text ends. Any idea what the function should be to just create enough space to get all of the object's text (but no white space at the end) ?

See https://stackoverflow.com/questions/8488729/how-to-count-the-number-of-lines-of-a-string-in-javascript to calculate number of lines in a string. — snwflk, Mar 25 '19 at 14:40
Possible duplicate of [How to count the number of lines of a string in javascript](https://stackoverflow.com/questions/8488729/how-to-count-the-number-of-lines-of-a-string-in-javascript) — kognise, Mar 25 '19 at 15:03

score 0 · Answer 1 · answered Mar 25 '19 at 15:50

You can use the scrollHeight value to determine the new height of the textarea onInput. Something like this may be what you are looking for: http://jsfiddle.net/ltsOver9000/sptmfw34/

class TextArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {height:'100px'};
  }

  render() {
    return (
        <div>
            <textarea 
            style={{height: this.state.height}} 
            onInput={e=>this.setState({height: `${e.target.scrollHeight||0}px`})}/>
        </div>
      );
  }
}

TextArea creates too much space. How to make it confined to the size of the object?

1 Answers1