Last active
January 20, 2024 18:51
-
-
Save simonw/6815f73098c803e31fcd20059318b937 to your computer and use it in GitHub Desktop.
Adapted version of https://codepen.io/chriscoyier/pen/XWKEVLy - see also https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.grow-wrap { | |
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */ | |
display: grid; | |
} | |
.grow-wrap::after { | |
/* Note the weird space! Needed to preventy jumpy behavior */ | |
content: attr(data-replicated-value) " "; | |
/* This is how textarea text behaves */ | |
white-space: pre-wrap; | |
/* Hidden from view, clicks, and screen readers */ | |
visibility: hidden; | |
} | |
.grow-wrap > textarea { | |
/* You could leave this, but after a user resizes, then it ruins the auto sizing */ | |
resize: none; | |
/* Firefox shows scrollbar on growth, you can hide like this. */ | |
overflow: hidden; | |
} | |
.grow-wrap > textarea, | |
.grow-wrap::after { | |
/* Identical styling required!! */ | |
border: 1px solid black; | |
border-radius: 3px; | |
padding: 0.35rem; | |
font: inherit; | |
line-height: 1.4; | |
font-family: sans-serif; | |
/* Place on top of each other */ | |
grid-area: 1 / 1 / 2 / 2; | |
} | |
body { | |
margin: 2rem; | |
font: 1rem/1.4 system-ui, sans-serif; | |
} | |
label { | |
display: block; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Auto-Growing <code><textarea></code></h1> | |
<form action="#0"> | |
<label for="text">Text:</label> | |
<div class="grow-wrap"> | |
<textarea rows="1" name="text" placeholder="Placeholder shows here" id="text" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea> | |
</div> | |
</form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Marvelous. @simonw if I were to adapt and use this for a project, can I assume it's either covered by your TIL Apache 2.0 license, or unlicensed?