Help Using Expanding Textarea Box?

A while back, Jakob posted this:&nbsp; <a href="https://app.roll20.net/forum/permalink/5603982/" rel="nofollow">https://app.roll20.net/forum/permalink/5603982/</a> I wanted to share my version of Kryx' trick for forms that grow with their contents, specifically textareas that grow extra lines to accommodate their contents. It didn't work for me immediately, so I though I'd share what I came up with after getting it to work like I wanted it to. Once set up, this functions in a pretty foolproof manner, and I think it's often a good alternative to offering a resize handle (these two are mutually exclusive), depending on what kind of data you use it for. HTML: &lt;div class="sheet-auto-expand"&gt; &lt;span name="attr_name"&gt;&lt;/span&gt; &lt;textarea spellcheck="false" name="attr_name"&gt;&lt;/textarea&gt; &lt;/div&gt; CSS: .sheet-auto-expand { position: relative; cursor: text; word-wrap: break-word; } .sheet-auto-expand span { visibility: hidden; white-space: pre-wrap; display: block; } .sheet-auto-expand textarea { position: absolute; z-index: 1; top: 0; left: 0; margin: 0; overflow: hidden; resize: none; height: 100%; width: 100%; display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; padding: inherit; text-align: inherit; text-transform: inherit; } You can set padding, border, and any kind of font properties you want on the .sheet-auto-expand container div as desired, and everything should be inherited by the actual textarea. It's important that you set this on the container div and not on the textarea, since the span also needs to inherit all these properties! Important: &nbsp;In order for this to actually show up on the sheet, one specific CSS property is missing: you need to set a min-height for the .sheet-auto-expand element equal to the minimum height you want it to be (so at least 1 line-height + vertical padding, or more if you want to show more lines by default). I wondered--is anyone able to make this work? I can't seem to make it do anything. The text box appears but does not resize at all. Here is my CSS: .sheet-auto-expand { position: relative; cursor: text; word-wrap: break-word; } .sheet-auto-expand span { visibility: hidden; white-space: pre-wrap; display: block; } .sheet-auto-expand textarea { position: absolute; z-index: 1; top: 0; left: 0; margin: 0; overflow: hidden; resize: none; min-height:18px; height: 100%; width: 100%; display: block; box-sizing: border-box; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; padding: inherit; text-align: inherit; text-transform: inherit; } And here is my HTML: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-row" align="center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3 style="text-align: center;"&gt;Bearing&lt;/h3&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-auto-expand"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_name"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea name="attr_bearing" style="width:250px;"&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;

The span and the textarea need to be the same attribute. It's the span that actually sizes the area.

Scott C. said: The span and the textarea need to be the same attribute. It's the span that actually sizes the area. Aha! Thanks for the quick reply! Can you show me, possibly, what that would look like? I'm way behind on my HTML.

Html elements are associated with attributes via the name property of the element. You need to set the span to have the same name attribute as the textarea. I'd recommend reading through the building character sheets wiki as there are several unique aspects of Roll20 sheet code compared to standard html, css, and js. So it should look like this: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-row" align="center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3 style="text-align: center;"&gt;Bearing&lt;/h3&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-auto-expand"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_bearing"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea name="attr_bearing" style="width:250px;"&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;

Scott C. said: Html elements are associated with attributes via the name property of the element. You need to set the span to have the same name attribute as the textarea. I'd recommend reading through the building character sheets wiki as there are several unique aspects of Roll20 sheet code compared to standard html, css, and js. So it should look like this: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-row" align="center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3 style="text-align: center;"&gt;Bearing&lt;/h3&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-auto-expand"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_bearing"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea name="attr_bearing" style="width:250px;"&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; I go through those parts of the wiki quite often, but they're often a bit over my head, alas, as they usually seem to assume familiarities that I lack. Still, I usually get by cobbling this and that together--especially when people kindly point out my mistakes when I reach out for assistance. Thank you for the help!