Did you know that a textarea won’t auto expand it’s vertical height when content exceeds vertical space? Because I didn’t. Instead it will automatically overflow: scroll which is nice until you need to find a way to auto expand height and you enter Technological Darwinism.
A lot of people think Darwin’s natural selection means that organisms end up perfect or even good at the role they’re competing for but as anyone with asthma can tell you, this isn’t right at all. No Darwinism refers to a system where the least bad option prevails, where organisms or systems evolve in such way as to do the exact minimum to survive long enough to procreate and if they are fit this criteria without competition they never change. Look at crocodiles, barely changing in millennia because nothing does their job better and they don’t die before having babies.
A few of the fun digital crocodiles I’ve run into recently have been the CSS properties height min-height and max-height which have paradoxical usage and hierarchies. The easy assumption to make is that height is the default, min-height is the lowest possible height and max-height is the largest possible height and when used in conjunction you get a nicely restricted element that still has room to grow and shift with devices. With each property in a vacuum that’s very true, individually they offer a lot of control and their usage is clear. In combination however it gets murky because it’s not at all obvious that height is overridden by max-height and that both are overridden by min-height . Nor is it obvious that you can’t use max-height with min-height. When reading these restrictions from the MDN my immediate response was confusion, who designed this and why? There are ways around these limitation like using nested elements but even then some components are resistant like textarea which stubbornly treats all three properties as the same. min-content and max-content might help to fix the problem later on down the line once they’ve passed draft but right now height in general is a mess.
This is Technological Darwinism, CSS sprang up out of necessity and it’s gotten better over the years but there are vestigial nubs and bits that have basically been abandoned. It’s not entirely organic, nor without curation, but not everything is in order and it’s the same with the HTML standard. There are gaps.
The problem I’ve been working on falls into one of those gaps. I’m attempting to get a textarea to expand vertically in a content aware way, something it was never intended to do. Requirements are for a textareato expand to show 2 lines of text until a 3rd line is entered where it will then expand to 3 visible lines of text, but the catch is all the styling was done without taking rows into account and textarea’s don’t work with height properly nor were they designed with content awareness in mind. It’s lead to a lot of awkward hacking, the first solution I tried was to switch to use a space but there is too much code and hacks around using a textarea. The final solution I’ve ended up with is a Javascript one where I check the elements scrollHeight and if it it’s at 3 visible rows it expands by repopulating the height element with a newly calculated height that’s equal to 3 rows of visible text.
There’s no nice or clean way to add vertically expanding content awareness to textarea’s you have to kludge it, bodge it and just like the Darwinian cruft that lead to this poor solution, it will probably live far longer than intended.
