Skip to content
Advertisement

React textarea component not able to expand horizontally

I am learning React/JS and I am on a spot where I want to have a textarea that I can resize horizontally and vertically. I have tried using react-bootstrap text area and one from material-ui (https://material-ui.com/components/textarea-autosize/).

My app.js looks like this..

function App() {
  return (
    <div>
     <TextareaAutosize />
    </div>
  )
}

But when the text area is spawned on the page I can only expand the text area up and down and not wider.

Advertisement

Answer

The textarea element from that library only helps with adjusting the height, not the width.

I played around with it in Code Sandbox and figured out that you can manually set the width by adding a cols property and setting it to a number like this:

<TextareaAutosize
   aria-label="minimum height"
   rowsMin={3}
   placeholder="Minimum 3 rows"
   cols={50}
/>

Check out the Code Sandbox example I created.

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement