AutoGrow Textareas with CSS

Published on:

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.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
  • 5 Awesome New Mozilla Technologies You’ve Never Heard Of

    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I’ve spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much…

  • How to Create a RetroPie on Raspberry Pi – Graphical Guide

    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo…

  • CSS Columns

    CSS Columns

    One major gripe that we’ve always had about CSS is that creating layouts seems to be more difficult than it should be. We have, of course, adapted and mastered the techniques for creating layouts, but there’s no shaking the feeling that there should be a…

  • Implement the Google AJAX Search API

    Implement the Google AJAX Search API

    Let’s be honest…WordPress’ search functionality isn’t great. Let’s be more honest…no search functionality is better than Google’s. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API.


Source link

Related