AutoGrow Textareas with CSS

As the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our presentation layer, CSS, has done incredibly well in improving capabilities, even if sometimes too slow. The need for native support for automatically expanding textarea elements has been long known…and it’s finally here! […]

The post AutoGrow Textareas with CSS appeared first on David Walsh Blog.


This content originally appeared on David Walsh Blog and was authored by David Walsh

As the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our presentation layer, CSS, has done incredibly well in improving capabilities, even if sometimes too slow. The need for native support for automatically expanding textarea elements has been long known…and it’s finally here!

To allow textarea elements to grow vertically and horizontally, add the field-sizing property with a value of content:

textarea {
  field-sizing: content; // default is `fixed`
}

The default value for field-sizing is fixed, signaling current behavior. The new behavior, content, will expand as much as possible. To constrain the size a textarea can grow, use traditional width/max-width and height/max-height properties.

The post AutoGrow Textareas with CSS appeared first on David Walsh Blog.


This content originally appeared on David Walsh Blog and was authored by David Walsh


Print Share Comment Cite Upload Translate Updates
APA

David Walsh | Sciencx (2023-12-18T11:55:51+00:00) AutoGrow Textareas with CSS. Retrieved from https://www.scien.cx/2023/12/18/autogrow-textareas-with-css/

MLA
" » AutoGrow Textareas with CSS." David Walsh | Sciencx - Monday December 18, 2023, https://www.scien.cx/2023/12/18/autogrow-textareas-with-css/
HARVARD
David Walsh | Sciencx Monday December 18, 2023 » AutoGrow Textareas with CSS., viewed ,<https://www.scien.cx/2023/12/18/autogrow-textareas-with-css/>
VANCOUVER
David Walsh | Sciencx - » AutoGrow Textareas with CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/12/18/autogrow-textareas-with-css/
CHICAGO
" » AutoGrow Textareas with CSS." David Walsh | Sciencx - Accessed . https://www.scien.cx/2023/12/18/autogrow-textareas-with-css/
IEEE
" » AutoGrow Textareas with CSS." David Walsh | Sciencx [Online]. Available: https://www.scien.cx/2023/12/18/autogrow-textareas-with-css/. [Accessed: ]
rf:citation
» AutoGrow Textareas with CSS | David Walsh | Sciencx | https://www.scien.cx/2023/12/18/autogrow-textareas-with-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.