leaflet.pub
a tool for shared writing and social publishing
awarm.space
1.grow-wrap {
2 /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
3 display: grid;
4 position: relative;
5 max-width: 100%;
6 overflow-wrap: anywhere; /* limit width in chrome */
7}
8
9.grow-wrap::after {
10 /* Note the weird space! Needed to preventy jumpy behavior */
11 content: attr(data-replicated-value) " ";
12
13 /* This is how textarea text behaves */
14 white-space: pre-wrap;
15
16 /* Hidden from view, clicks, and screen readers */
17 visibility: hidden;
18}
19.grow-wrap > textarea {
20 /* You could leave this, but after a user resizes, then it ruins the auto sizing */
21 resize: none;
22
23 /* Firefox shows scrollbar on growth, you can hide like this. */
24 overflow: hidden;
25}
26.grow-wrap > textarea,
27.grow-wrap::after {
28 padding: 0;
29 width: 100%;
30 font: inherit;
31 border: none;
32 /* Place on top of each other */
33 grid-area: 1 / 1 / 2 / 2;
34}
35
36.grow-wrap > textarea:focus {
37 outline: none;
38}
39
40.no-wrap::after {
41 white-space: pre !important;
42}