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


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.scrollHeight;
    console.log("Current Scroll Height: "+elem.scrollHeight)
    console.log("New Height: "
  document.getElementById("editor").addEventListener("change", 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 does nothing. I console it and I get nothing.


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.


Or you can use a lib

1 Like

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

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.

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.

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