Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Fri, 05 Jan 2024 19:28:28 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 225069128 Auto-Sizing Textarea https://frontendmasters.com/blog/auto-sizing-textarea/ https://frontendmasters.com/blog/auto-sizing-textarea/#respond Fri, 05 Jan 2024 19:27:39 +0000 https://frontendmasters.com/blog/?p=357 Credit to Stephen Shaw for the original idea, there is a decently easy way to make an auto-sizing <textarea> element. It is here. But it’s not perfect. There is a frustrating hard-to-replicate iOS bug. Plus it’s just a trick. It requires JavaScript and some pretty specific CSS to pull off.

It’s awesome to see the web platform pick up an easy one-liner way to do this, by way of a new CSS property:

textarea {
  field-sizing: content;
}

Adam Argyle has a simple demo here to play with (note how the field-sizing can apply to inline size as well as block size). As I write, Chrome Canary has it in v122, and should go out in stable in late February. Let’s 🙏 for quick cross-browser support.

At one time when this was being played with, the CSS property was called form-sizing, but I think I like the update to field-sizing. I think of these things as “fields”, and quite notably it works on <input> as well as <textarea>. Fork Adam’s demo and have it apply to an input instead to see it work (in Chrome Canary).

]]>
https://frontendmasters.com/blog/auto-sizing-textarea/feed/ 0 357