Skip to content

Instantly share code, notes, and snippets.

@simonw
Last active January 20, 2024 18:51
Show Gist options
  • Save simonw/6815f73098c803e31fcd20059318b937 to your computer and use it in GitHub Desktop.
Save simonw/6815f73098c803e31fcd20059318b937 to your computer and use it in GitHub Desktop.
.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;
}
<h1>Auto-Growing <code>&lt;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>
@reefdog
Copy link

reefdog commented Oct 20, 2023

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment