Auto Expanding Textareas

How does one get a textarea to expand after text has been put into it? I have seen this feature on several sheets, but I cannot make heads or tails of it.

I've had success reusing the sample here: <a href="https://app.roll20.net/forum/post/882997/css-wizardry/?pageforid=5603982#post-5603982" rel="nofollow">https://app.roll20.net/forum/post/882997/css-wizardry/?pageforid=5603982#post-5603982</a>

...not working for me.&nbsp; I set the minimum height per the instructions, and all it does is cover the other stuff below it. Edit : And it doesn't expand.

I'll try and drum up an example. I'm currently dealing with some life altering medical issues in my immediate family...&nbsp; Chris B. used it on the PF community sheet.&nbsp; Look at the first character section (name, age, alignment, etc.)

You can try playing around with this CPP html &lt;div class="wrapper"&gt; &lt;label class="title-text autoexpand"&gt; &lt;input type="text" name="attr_foo" /&gt; &lt;span&gt;Foo&lt;/span&gt; &lt;span class="autoexpand" name="attr_foo"&gt;&lt;/span&gt; &lt;/label&gt; &lt;br&gt; &lt;label class="title-text autoexpand"&gt; &lt;textarea name="attr_foo1"&gt;&lt;/textarea&gt; &lt;span&gt;Foo1&lt;/span&gt; &lt;span class="autoexpand" name="attr_foo1"&gt;&lt;/span&gt; &lt;/label&gt; &lt;/div&gt; css .sheet-wrapper { width: 100%; background-color:beige; } input[type="text"], textarea { width: 100%; min-width: 40px; } .sheet-title-text.sheet-autoexpand { width: auto; min-width: 40px; max-width: 99%; } .sheet-title-text.sheet-autoexpand input, .sheet-title-text.sheet-autoexpand textarea { position:absolute; overflow:hidden; } .sheet-title-text.sheet-autoexpand textarea { width: calc(100% - 10px); } .sheet-title-text.sheet-autoexpand span.sheet-autoexpand { visibility: hidden; width: 100%; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; display: block; z-index: -1; height: 1em; overflow: hidden; margin-top: -1em; font-size: 1em; } .sheet-title-text &gt; input:not([class="*"]), .sheet-title-text &gt; textarea:not([class="*"]) { display: block; padding: 5px; position: relative; font-size: 1em; } .sheet-title-text.sheet-autoexpand span:not(.sheet-autoexpand) { white-space: nowrap; } .sheet-title-text { display: inline-block; text-align: center; position: relative; }

I will give it a try tomorrow and see what happens&nbsp;

i think it works best with text inputs.&nbsp; Not sure if I ever got it to work as I wanted for textarea...&nbsp; I included both.&nbsp; Goodluck.

Okay, this is working.&nbsp; Thank you, Vince.&nbsp; I just have to style it now.&nbsp; For that, I style the container and have everyone inherit the result, correct? Also...beige?&nbsp; Really?

hehe, i often use beige as a testing colour. It does look pretty awful.

@CPP you'll have to play around with styling.&nbsp; I had to add a font-size in order for the expandable span to tightly match the width of the hidden text. lol "Beige" sounds better than it looks.&nbsp; ;-)