Make textarea height equal to the size of the content isnide of it

JavaScript
1

Hello,

I am working on my markdown previewer and I have a few UI issues.

I am wondering how I can make the textarea resize so the use doesn’t need to scroll.

I came up with the following code:

  function changeHeight(id) {
    let elem = document.getElementById(id)
    elem.style.height = elem.scrollHeight;
    console.log("Current Scroll Height: "+elem.scrollHeight)
    console.log("New Height: "+elem.style.height)
    console.log(elem)
  }
  document.getElementById("editor").addEventListener("change", changeHeight("editor"));
  changeHeight("editor")

This could show make it so whenever my editor element changes, it changes the height so the scroll height. I also call it once when the page first loads to account for the placeholder.

The issue is that my event listener never fires whenever I change the editor, and the elem.style.height does nothing. I console it and I get nothing.

image

2

Start by getting rid of the jQuery and plain JS code. Remember this is a React app.

  1. Create a ref and add it to the textarea element.

  2. Inside the textarea handler method call the resize code.

  3. Use componentDidMount to set the initial size.

Example

Or you can use a lib

1 Like
3

Sorry for the delay, thank you so much for the help.

I just did some research on ref and it seems very intuitive. It would be nice if they added this into the React FCC course.

In a previous forum post a few weeks ago I had issues with my textarea not fitting to the container.

Link: Make textarea conform to container - #2 by lasjorg

image
image1612×979 85.9 KB

This issue seems to be re-occurring after I integrated the React into this project:

*{box-sizing: border-box;}

Is currently in the project CSS, but this doesn’t seem to be working as it did.

4

Like I said in the other thread. If you keep it as inline-block you can use vertical-align: bottom or you can set the element to display block instead.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.