{"id":3763,"date":"2025-06-21T09:59:47","date_gmt":"2025-06-21T09:59:47","guid":{"rendered":"https:\/\/techtrendfeed.com\/?p=3763"},"modified":"2025-06-21T09:59:47","modified_gmt":"2025-06-21T09:59:47","slug":"autogrow-textareas-with-css","status":"publish","type":"post","link":"https:\/\/techtrendfeed.com\/?p=3763","title":{"rendered":"AutoGrow Textareas with CSS"},"content":{"rendered":" \r\n<br><div id=\"main\"><article itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\">\n<p>Because the calls for of the net change and builders experiment with completely different consumer experiences, the necessity for extra native language enhancements expands. Our presentation layer, CSS, has completed extremely nicely in enhancing capabilities, even when generally too sluggish. The necessity for native assist for robotically increasing <code>textarea<\/code> parts has been lengthy identified&#8230;and it is lastly right here!<\/p>\n\n\n\n<p>To permit <code>textarea<\/code> parts to develop vertically and horizontally, add the <code>field-sizing<\/code> property with a price of <code>content material<\/code>:<\/p>\n\n\n\n<pre class=\"css\">\ntextarea {\n  field-sizing: content material; \/\/ default is `mounted`\n}\n<\/pre>\n\n\n\n<p>The default worth for <code>field-sizing<\/code> is <code>mounted<\/code>, signaling present conduct.  The brand new conduct, <code>content material<\/code>, will broaden as a lot as attainable.  To constrain the scale a <code>textarea<\/code> can develop, use conventional <code>width\/max-width<\/code> and <code>top\/max-height<\/code> properties.<\/p>\n\n\n\n<div class=\"x x-long x-secondary\">\n    \n    \n    <div class=\"x-secondary-large\">\n    <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n        <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_banner-728.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"728\" height=\"90\"\/>\n    <\/a>\n    <\/div>\n    <div class=\"x-secondary-small\">\n    <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n        <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_block_300.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"300\" height=\"250\"\/>\n    <\/a>\n    <\/div>\n<\/div>\n\n\n\n\n\n<\/article>\n\n<div class=\"article-block\" style=\"min-height:90px\"><div class=\"x x-long x-terciary\" style=\"max-height: none;\">\n  \n    \n    \n<div class=\"x-secondary-large\">\n  <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n    <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_banner-728.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"728\" height=\"90\"\/>\n  <\/a>\n<\/div>\n<div class=\"x-secondary-small\">\n  <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n    <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_block_300.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"300\" height=\"250\"\/>\n  <\/a>\n<\/div>\n\n  \n\n<\/div>\n<\/div>\n\n\n<div class=\"article-block post-more\" style=\"\u201cclear:both;\u201d\"><ul class=\"post-list small-list\"><li data-url=\"https:\/\/davidwalsh.name\/3d-menu\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/3d-menu.png?preview\" class=\"post-image\" alt=\"Animated 3D Flipping Menu with CSS\"\/><\/span><\/li><li data-url=\"https:\/\/davidwalsh.name\/firefox-os\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/firefox-phone.png?preview\" class=\"post-image\" alt=\"6 Things You Didn\u2019t Know About Firefox OS\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/firefox-os\" itemprop=\"url\">6 Issues You Didn\u2019t Know About Firefox\u00a0OS<\/a><\/h3><p><a rel=\"nofollow\" target=\"_blank\" href=\"http:\/\/www.mozilla.org\/en-US\/firefoxos\/\" rel=\"nofollow\">Firefox OS<\/a> is everywhere in the tech information and for good cause: \u00a0Mozilla&#8217;s lastly given\u00a0net builders the platform that they should create apps the way in which they have been creating them for years &#8212; with CSS, HTML, and JavaScript. \u00a0Firefox OS has been quickly enhancing&#8230;<\/p><\/div><\/li><\/ul><\/div><div class=\"article-block post-more\"><ul class=\"post-list small-list\"><li data-url=\"https:\/\/davidwalsh.name\/more-html5-apis\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/html5250.png?preview\" class=\"post-image\" alt=\"5 More HTML5 APIs You Didn\u2019t Know Existed\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/more-html5-apis\" itemprop=\"url\">5 Extra HTML5 APIs You Didn\u2019t Know\u00a0Existed<\/a><\/h3><p>The <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/tutorials\/html5\">HTML5 revolution<\/a> has offered us some superior JavaScript and HTML APIs. \u00a0Some are APIs we knew we have wanted for years, others are leading edge cell and desktop helpers. \u00a0No matter API power or function, something to assist us higher do our job is a&#8230;<\/p><\/div><\/li><li data-url=\"https:\/\/davidwalsh.name\/mootools-scrollspy\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/css3logo250.jpg?preview\" class=\"post-image\" alt=\"Introducing MooTools ScrollSpy\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/mootools-scrollspy\" itemprop=\"url\">Introducing MooTools\u00a0ScrollSpy<\/a><\/h3><p>I have been excited to launch this plugin for a very long time.  MooTools ScrollSpy is a singular however easy MooTools plugin that listens to web page scrolling and fires occasions based mostly on the place the consumer has scrolled to within the web page.  Now you&#8217;ll be able to hearth particular&#8230;<\/p><\/div><\/li><\/ul><\/div><\/div>\r\n<br>\r\n","protected":false},"excerpt":{"rendered":"<p>Because the calls for of the net change and builders experiment with completely different consumer experiences, the necessity for extra native language enhancements expands. Our presentation layer, CSS, has completed extremely nicely in enhancing capabilities, even when generally too sluggish. The necessity for native assist for robotically increasing textarea parts has been lengthy identified&#8230;and it [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3765,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[3475,1147,3476],"class_list":["post-3763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-autogrow","tag-css","tag-textareas"],"_links":{"self":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/3763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3763"}],"version-history":[{"count":1,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/3763\/revisions"}],"predecessor-version":[{"id":3764,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/3763\/revisions\/3764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/media\/3765"}],"wp:attachment":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- This website is optimized by Airlift. Learn more: https://airlift.net. Template:. Learn more: https://airlift.net. Template: 69d9690a190636c2e0989534. Config Timestamp: 2026-04-10 21:18:02 UTC, Cached Timestamp: 2026-05-14 16:44:16 UTC -->