How to toggle the size of a text box within a repeating list?

So, I have a custom character sheet that uses repeating lists for skills, powers, etc. (See image, below.) What I want to do is to have a checkbox (or similar) to toggle a text box from a set height to, ideally, whatever height it needs to fit the text inside it, essentially expanding/collapsing from 1-2 lines of text to as many as needed. (I've looked at&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Swap_Visible_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Swap_Visible_Areas</a> , but it doesn't do what I need.) The sheet list current looks like this: I just want to be able to add a checkbox to the end of each row, which will expand the text box to fit the height of whatever text is in it. Does this seem possible to anyone?&nbsp; Code for the section above: &nbsp; &nbsp; &lt;h3 align="left"&gt;Skills [&lt;input type="text" name="attr_Skillstotal" style="width:50px" value="0" readonly/&gt;]&lt;/h3&gt; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" style="width:800px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;fieldset class="repeating_skills"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-row" align="left"style="height:30px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type='roll' value='&amp;{template:default} {{name=@{character_name}: @{skillname} (@{skilllevel}) }} {{Roll=[[1d20!!]]}} {{Note=@{skilldesc} }}' name='roll_Skill'&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea class="sheet-skillnames" type="text" name="attr_skillname" style="width:250px; height:20px"/&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" width="50px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" class="sheet-skills" name="attr_skilllevel" style="width:50px" value="0"/&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" width="430px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea class="sheet-skilldescs" type="text" name="attr_skilldesc" style="width:400px; height:20px"/&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/fieldset&gt; &nbsp; &nbsp; &lt;/div&gt; I greatly appreciate any help anyone can offer. Thank you!

This is going to be an adaptation of a technique developed by Chris and Vince (scaling vertically instead of horizontally). The basic idea is that we're going to create a hidden (opacity:0) attribute backed span that will sit behind the textarea and through some whitespace styling will use the proper amount of space. The end product looks like this: And here's the example code (adapt as needed for your repeating sections): HTML &lt;input type='checkbox' class='controller' name='attr_controller' value='1'&gt; &lt;div class='container'&gt; &lt;span class='sizer' name='attr_text'&gt;&lt;/span&gt; &lt;textarea class='visible' name='attr_text'&gt;&lt;/textarea&gt; &lt;/div&gt; CSS .sheet-container{ width:9em;/*a random width setting*/ height:auto;/*We want this div to grow with it's contents*/ position:relative;/*setting this to relative will base the later position absolute on it*/ } .sheet-controller:checked + .sheet-container .sheet-sizer{ height:1em;/*if the controller is checked, then limit the height to 1em (~10px)*/ } .sheet-controller:not(:checked) +.sheet-container .sheet-sizer{ height:auto;/*if the controller is not checked, then let the sizer grow as needed.*/ } .sheet-sizer{ display:block; opacity:0; white-space:pre-wrap;/*this preserves the whitespace and line wraps. Lines will wrap as needed. Does not preserve trailing line breaks*/ width:100%; min-height:1em;/*keeps the whole construct from being too thin*/ } .sheet-visible{ resize:none;/*We probably don't want this textarea resizable*/ position:absolute;/*this will let the textarea sit on top of the sizer span*/ top:0px;/*forces the textarea to sit at the top of the div*/ left:0px;/*forces the textarea to sit at the left of the div*/ height:100%;/*the textarea will stretch from the top to bottom*/ width:100%;/*and left to right of the div*/ } Hope that helps, and let me know if you have any questions EDIT: Note there is one issue with this method. I've noted it in my comments, but just to make sure it is obvious trailing line breaks will not add to the span's height.

That's very nice. I'm saving that.

Very cool, and thank you! However, this doesn't work because in the repeating list because the biggest the text box can get is the height of the line. So, to make this work, I guess the toggle would also have to be able to increase the height of the whole line, itself? I'll play with this some more, but I'm admittedly in a bit over my head, here. :/

Well, I'm afraid I'm stumped! Here's what I've created: &nbsp; &nbsp; &nbsp; &nbsp; &lt;fieldset class="repeating_powers"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-row" align="left"style="height:30px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type='roll' value='&amp;{template:default} {{name=@{character_name}: @{powername} (@{powerlevel}) }} {{Roll=[[1d20!!]]}} {{Note=@{powerdesc} }}' name='roll_power'&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea class="sheet-powernames" type="text" name="attr_powername" style="width:250px; height:20px"/&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" width="50px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" class="sheet-powers" name="attr_powerlevel" style="width:50px" value="0"/&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" width="375px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type='checkbox' class='controller' name='attr_controller' value='1'&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class='container'&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class='sizer' name='attr_powerdesc'&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea class='visible' name='attr_powerdesc' style='width:300px'&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/fieldset&gt; Which creates this: Also, on a more minor note, the checkbox overlaps the text box--can I move it to a different column or such? Otherwise, any ideas? Thanks again for the help!

Thanks GiGs. I should really also credit Natha who showed me how to do this version of the technique. Dave, Ah, you just need to take out/change the inline styling of your row div. That's locking it to 30px. You need to give it a height of auto. As for the checkbox, you can move it wherever you'd like,just leave a version where it currently is and change the copy that stays behind to type=hidden, and replace the :checked selector with [value=1] in both places. You'll also want to change the default value of the hidden version to 0 most likely.

Edit: Found one of the problems. Very cool! This works nicely with only a couple of hiccups. A minor issue is that, oddly, the boxes are opening at seemingly random heights when toggled open, which isn't a huge issue but does look strange. I suppose I could opt for a set height, instead, but I'd rather figure out what I'm doing wrong to make the fields come up so randomly. A possibly more significant issue is, sometimes toggling one checkbox seems to affect several lines of the repeating section at once, toggling them seemingly randomly open/closed. This is the HTML: &nbsp; &nbsp; &nbsp; &nbsp; &lt;fieldset class="repeating_powers"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-row" align="left" style="height:auto"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" width="25px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type='roll' style="width:15px; height:15px" value='&amp;{template:default} {{name=@{character_name}: @{powername} (@{powerlevel}) }} {{Roll=[[1d20!!]]}} {{Note=@{powerdesc} }}' name='roll_power'&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" style="width:260px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea class="sheet-powernames" type="text" name="attr_powername" style="width:233px; height:13px"/&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col" style="width:50px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="number" class="sheet-powers" name="attr_powerlevel" style="width:50px; height:23px" value="0"/&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-col"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type='checkbox' class='controller' name='attr_controller' value='1'&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class='container'&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class='sizer' name='attr_powerdesc'&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea class='visible' name='attr_powerdesc' style='width:400px'&gt;&lt;/textarea&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/fieldset&gt; This produces a result like this: Oh, and one final question: will I need to duplicate the CSS or such in order to have this effect on each of my repeating sections, change some labels, or similar? &nbsp;(Figured this part out!) If you have any further thoughts, I'd be quite interested to hear!

Can you post your css as well?

I'm afraid it's quite a hodgepodge, but here it is: /* This section taken from the Vampire: The Masquerade */ .charsheet label { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; width: 75px; &nbsp; &nbsp; text-align: right; &nbsp; &nbsp; padding-bottom: 0px; } .charsheet input { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; width: 160px; } .charsheet { &nbsp; &nbsp; background-color: white; } .charsheet select { &nbsp; &nbsp; width: 42px; } /* Hide actual dot/checkbox */ input[type="radio"], input[type="checkbox"] { &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; opacity: 100; &nbsp; &nbsp; width:15px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; &nbsp; &nbsp; margin-top: 6px; } /* Styles common to fake dot and checkbox */ input[type="radio"] + span::before, input[type="checkbox"] + span::before { &nbsp; &nbsp; border: solid 1px #a8a8a8; &nbsp; &nbsp; line-height: 14px; &nbsp; &nbsp; text-align: middle; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; vertical-align: middle; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; -moz-box-shadow: 0 0 2px #ccc; &nbsp; &nbsp; -webkit-box-shadow: 0 0 2px #ccc; &nbsp; &nbsp; box-shadow: 0 0 2px #ccc; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; background: #f6f6f6; &nbsp; &nbsp; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); &nbsp; &nbsp; background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); &nbsp; &nbsp; background: -ms-radial-gradient(#f6f6f6, #dfdfdf); &nbsp; &nbsp; background: -o-radial-gradient(#f6f6f6, #dfdfdf); &nbsp; &nbsp; background: radial-gradient(#f6f6f6, #dfdfdf); } /* Styles unique to fake dot (checked or left of checked) */ input[type="radio"] + span::before { &nbsp; &nbsp; content: "•"; &nbsp; &nbsp; width: 12px; &nbsp; &nbsp; height: 12px; &nbsp; &nbsp; font-size: 36px; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; -moz-border-radius: 50%; &nbsp; &nbsp; -webkit-border-radius: 50%; &nbsp; &nbsp; border-radius: 50%; } /* Remove dot from all radios _after_ selected one */ input[type="radio"]:checked ~ input[type="radio"] + span::before {&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; content: ""; } input.sheet-used+span::before { &nbsp; &nbsp; content: "?"; &nbsp; &nbsp; width: 12px; &nbsp; &nbsp; height: 12px; &nbsp; &nbsp; font-size: 12px; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; -moz-border-radius: 0%; &nbsp; &nbsp; -webkit-border-radius: 0%; &nbsp; &nbsp; border-radius: 0%; } input.sheet-zero:checked + span::before { &nbsp; &nbsp; opacity: 0; } input.sheet-zero:hover + span::before { &nbsp; &nbsp; opacity: 1; } input.sheet-zero+ span::before { &nbsp; &nbsp; font-size: 12px; &nbsp; &nbsp; content: "?"; &nbsp; &nbsp; opacity: 0.25; } input.sheet-DP1Spec + span::before, input.sheet-DP2Spec + span::before, input.sheet-DP2Spec + span::before, input.sheet-DP3Spec + span::before, input.sheet-DP4Spec + span::before, input.sheet-DP5Spec + span::before { &nbsp; &nbsp; opacity: 1; &nbsp; &nbsp; margin-bottom: 10px; } div.sheet-DP1, div.sheet-DP2, div.sheet-DP2, div.sheet-DP3, div.sheet-DP4, div.sheet-DP5 { &nbsp; &nbsp; display: inline; } div.sheet-DP1wSpec, div.sheet-DP2wSpec, div.sheet-DP2wSpec, div.sheet-DP3wSpec, div.sheet-DP4wSpec, div.sheet-DP5wSpec { &nbsp; &nbsp; display: none; } input.sheet-DP1Spec:checked ~ div.sheet-DP1, input.sheet-DP2Spec:checked ~ div.sheet-DP2, input.sheet-DP2Spec:checked ~ div.sheet-DP2, input.sheet-DP3Spec:checked ~ div.sheet-DP3, input.sheet-DP4Spec:checked ~ div.sheet-DP4, input.sheet-DP5Spec:checked ~ div.sheet-DP5 { &nbsp; &nbsp; display: none; } input.sheet-DP1Spec:checked ~ div.sheet-DP1wSpec, input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec, input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec, input.sheet-DP3Spec:checked ~ div.sheet-DP3wSpec, input.sheet-DP4Spec:checked ~ div.sheet-DP4wSpec, input.sheet-DP5Spec:checked ~ div.sheet-DP5wSpec { &nbsp; &nbsp; display: inline; } h4.sheet-SCorI1, h4.sheet-SCorI2, h4.sheet-CorC1, h4.sheet-CorC2 { &nbsp; &nbsp; display: block; } input.sheet-SCorI1, input.sheet-SCorI2, input.sheet-CorC1, input.sheet-CorC2 { &nbsp; &nbsp; width: 120px; } input.sheet-SCorI1:checked ~ h4.sheet-SCorI1, input.sheet-SCorI2:checked ~ h4.sheet-SCorI2 { &nbsp; &nbsp; display: none; } input.sheet-CorC1:checked ~ h4.sheet-CorC1, input.sheet-CorC2:checked ~ h4.sheet-CorC2 { &nbsp; &nbsp; display: none; } /* This section taken from the D&amp;D 5E sheet */ /* overall wrapper to fix moving width issues with overflow on hidden sections */ .charsheet .sheet-overall-wrapper { &nbsp; &nbsp; max-width: 832px; } /* Tweak repeating section buttons so they have a bottom margin and dont overflow when in edit mode. */ .charsheet div[class^="repcontrol"] { &nbsp; &nbsp; margin-bottom: 5px; } .charsheet div[class="repcontainer editmode"] ~ div[class^="repcontrol"] button[class="btn repcontrol_add"] { &nbsp; &nbsp; display: inline-block!important; &nbsp; &nbsp; visibility: hidden; } /* Main Sheet Tabs */ .charsheet div[class^="sheet-section"] {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; visibility: hidden; opacity: 0; max-height:0; overflow: hidden; } .charsheet input.sheet-tab1:checked ~ div.sheet-section-core, .charsheet input.sheet-tab2:checked ~ div.sheet-section-skills, .charsheet input.sheet-tab3:checked ~ div.sheet-section-powers, .charsheet input.sheet-tab4:checked ~ div.sheet-section-advantages, .charsheet input.sheet-tab5:checked ~ div.sheet-section-drawbacks, .charsheet input.sheet-tab6:checked ~ div.sheet-section-equipment, .charsheet input.sheet-tab7:checked ~ div.sheet-section-xxxxx, .charsheet input.sheet-tab8:checked ~ div.sheet-section-yyyyy, .charsheet input.sheet-tab9:checked ~ div.sheet-section-zzzzz { max-height: 999999px; visibility: visible; opacity: 1; transition: opacity 0.5s linear 0s; overflow: auto; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { max-height: 999999px; visibility: visible; opacity: 1; transition: opacity 0.5s linear 0s; } .charsheet input.sheet-tab { &nbsp; &nbsp; width: 87px; &nbsp; &nbsp; height: 20px; &nbsp; &nbsp; cursor: pointer; position: relative; opacity: 0; z-index: 9999; } .charsheet span.sheet-tab { text-align: center; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; font-size: 13px; background: #4a6486;&nbsp; color: white; font-weight: bold; border-radius: 4px; width: 87px; &nbsp; &nbsp; height: 20px; &nbsp; &nbsp; cursor: pointer; position: relative; margin-left: -91px; } .charsheet input.sheet-tab1:checked + span.sheet-tab1, .charsheet input.sheet-tab2:checked + span.sheet-tab2, .charsheet input.sheet-tab3:checked + span.sheet-tab3, .charsheet input.sheet-tab4:checked + span.sheet-tab4, .charsheet input.sheet-tab5:checked + span.sheet-tab5, .charsheet input.sheet-tab6:checked + span.sheet-tab6, .charsheet input.sheet-tab7:checked + span.sheet-tab7, .charsheet input.sheet-tab8:checked + span.sheet-tab8, .charsheet input.sheet-tab9:checked + span.sheet-tab9, .charsheet input.sheet-tab99:checked + span.sheet-tab99 { &nbsp; &nbsp; background: #ab8b57;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; color: white; border-radius: 4px; } /* END Main sheet tabs */ /* ----Box size toggle code---- */ .sheet-container{ &nbsp; &nbsp; width:9em;/*a random width setting*/ &nbsp; &nbsp; height:auto;/*We want this div to grow with it's contents*/ &nbsp; &nbsp; position:relative;/*setting this to relative will base the later position absolute on it*/ } .sheet-controller:checked + .sheet-container .sheet-sizer{ &nbsp; &nbsp; height:1em;/*if the controller is checked, then limit the height to 1em (~10px)*/ } .sheet-controller:not(:checked) +.sheet-container .sheet-sizer{ &nbsp; &nbsp; height:auto;/*if the controller is not checked, then let the sizer grow as needed.*/ } .sheet-sizer{ &nbsp; &nbsp; display:block; &nbsp; &nbsp; opacity:0; &nbsp; &nbsp; white-space:pre-wrap;/*this preserves the whitespace and line wraps. Lines will wrap as needed. Does not preserve trailing line breaks*/ &nbsp; &nbsp; width:100%; &nbsp; &nbsp; min-height:1em;/*keeps the whole construct from being too thin*/ } .sheet-visible{ &nbsp; &nbsp; resize:none;/*We probably don't want this textarea resizable*/ &nbsp; &nbsp; position:absolute;/*this will let the textarea sit on top of the sizer span*/ &nbsp; &nbsp; top:0px;/*forces the textarea to sit at the top of the div*/ &nbsp; &nbsp; left:0px;/*forces the textarea to sit at the left of the div*/ &nbsp; &nbsp; height:100%;/*the textarea will stretch from the top to bottom*/ &nbsp; &nbsp; width:100%;/*and left to right of the div*/ } /* ----Disable resizing of text area boxes---- */ textarea { &nbsp; &nbsp;resize: none; &nbsp; &nbsp;padding-left: 20px; }