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..
JavaScript
x
8
1
function App() {
2
return (
3
<div>
4
<TextareaAutosize />
5
</div>
6
)
7
}
8
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:
JavaScript
1
7
1
<TextareaAutosize
2
aria-label="minimum height"
3
rowsMin={3}
4
placeholder="Minimum 3 rows"
5
cols={50}
6
/>
7
Check out the Code Sandbox example I created.