Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to get a textarea to stretch to fit its content without using PHP or JavaScript?

Tags:

html

css

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)?

like image 847
significance Avatar asked Sep 27 '22 21:09

significance


People also ask

How do I resize textarea content?

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.

How do you auto expand textarea?

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.

How do I resize textarea in HTML?

You can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.

How make textarea responsive width?

Try textarea {max-width:95%;} - it will always fit your display.


2 Answers

one line only

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
like image 337
Martin Prestone Avatar answered Oct 17 '22 20:10

Martin Prestone


Not really. This is normally done using javascript.

there is a good discussion of ways of doing this here...

Autosizing textarea using Prototype

like image 51
Rik Heywood Avatar answered Oct 17 '22 22:10

Rik Heywood