I am filling a textarea with content for the user to edit.
Is it possible to make it stretch to fit content with CSS (like overflow:show
for a div)?
You can achieve this by using a span and a textarea. You have to update the span with the text in textarea each time the text is changed. Then set the css width and height of the textarea to the span's clientWidth and clientHeight property.
It can be achieved by using JavaScript and jQuery. Method 1: Using JavaScript: To change the height, a new function is created which changes the style property of the textarea. The height of the textarea is first set to auto. This value makes the browser set the height of an element automatically.
You can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.
Try textarea {max-width:95%;} - it will always fit your display.
one line only
<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
Not really. This is normally done using javascript.
there is a good discussion of ways of doing this here...
Autosizing textarea using Prototype
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With