Expanding blacks and fixed height

Sooo...I am working on a custom Rogue Trader sheet, and want to add some text under the skills.  The original used a table for the skill list, and this worked great.  I added in some expanding feilds and everything was good.  Now, I am trying to use the sheet-row below instead of table...and its not expanding (ya know, because of the fixed height).  <div class="item 250">     <input type="checkbox" class="sheet-hider" name="attr_acrobatics_open" value="1" checked="true"/><span></span>     Acrobatics (Ag)     <div class="sheet-hold">         <textarea class="sheet-small sheet-talent" name="attr_acrobatics_notes"></textarea>     </div> </div> .charsheet .sheet-wrapper .sheet-row { height: 24px; margin: 0 0 2px; } With the expanding field inside the height limiting container, I am having difficulty finding a solution.  Is there a way to tell the container to stay in one size most of the time, but when forced to, expand? This sounds like "flex" but I haven't figured that out yet.  And I am hoping for a real easy explanation.  Like I missed a comma or something.

I am not a CSS expert by any means, but maybe min-height: 24px would do what you want?

Just tried it.  Sadly, min-height isn't the magic trick for this.  Thanks for the input.

I don't think the height of the textarea can "auto-expand" to it's content without JS and sadly, roll20 doesn't allow JS to effect the DOM.  I think you'll have to settle for setting a default height and just allowing the user to expand/scroll the textarea.  I found that " contenteditable " can be used on an element such as an auto-expanding div, but it appears this isn't allowed on roll20.  Not sure if it will help with your textarea fields, but there's a trick you can use on text inputs that can autoexapnd the width of the field based on it's contents.  Basically you wrap a text input(width:100%) and a hidden span that contains the same content as the input within an expandable div. The outer element will expand to the width of the hidden span which will also expand the width of the input to match.  Not sure if this would work on a textarea or if it could autoexpand the height.  Sorry, not a missing comma... ;-P

I kinda figured.  I did get it to work using a grid instead of rows or a table.  Thanks for he input

Coal Powered Puppet said: I kinda figured.  I did get it to work using a grid instead of rows or a table.  Thanks for he input Have you found a "good" method for converting tables to divs CPP?  I'm finding it's a real pain.

What I use I stole from the Warhammer 40k sheets.  Rows with a set height and items with a set width. Plus some columns, a few grids, and I am experimenting with flex (usually unsuccessfully). HTML  <div class="sheet-row">     <div class="sheet-item sheet-20">foo</div>     <div class="sheet-item sheet-20">foo</div>     <div class="sheet-item sheet-20">foo</div> </div> CSS .sheet-item { display: inline-block; width: 100%; height: 28px; vertical-align: middle; margin: 0 -2px; text-align: left; padding: 3px 2px; } .sheet-row { height: 24px; margin: 0 0 2px; } .sheet-item.sheet-20 { width: 20px; }

Thanks CPP.  I'm trying to come up with a method to convert older sheet's from tables to divs using a path of least resistance...  Tables seem to be OK for the most part but I can understand their lack of flexibility.  Emulating colspan seems to be my biggest headache.  Flexbox and CSS Grid look promising, but I'm still at the water's edge afraid to make the leap.  It's one thing to start from scratch, but to convert an existing sheet to match the layout already achieved using tables is a pain.

I havent used flexbox, and mean to check it out, but grid is great for table-style layout. You could reproduce that three columns foo CPP posted above with this code: HTML <div class="grid">     <div class="item">foo</div>     <div class="item">foo</div>     <div class="item">foo</div> </div> CSS .sheet-grid {     display: grid;     grid-template-rows: 24px;     grid-template-columns: 20px 20px 20px;     grid-row-gap: 2px; grid-column-gap: 3px; } .sheet-item {     text-align:left;     /* whatever css you need for appearance */ } I dont know if you need the vertical align or width:100% (depends on your layout, I guess), but you dont need the margin. Overall its quite a bit more compact.

Thanks GiGs

Vince said:   It's one thing to start from scratch, but to convert an existing sheet to match the layout already achieved using tables is a pain. I know your pain.  While its easy to see how limiting tables are, I don't understand the hatred for tables; all I know is that some folks have it.  So I am just going to practice using these new other methods and see what happens.

Side note: why is that "width" blue with hover elements? GiGs said: ...align or width:100% (depends ...

Coal Powered Puppet said: Side note: why is that "width" blue with hover elements? GiGs said: ...align or width:100% (depends ... No clue.  Perhaps another unsolved mystery of the forum's text editor?  :-o

I feel y'all's pain. But I will say, I'm loving flex boxes. They can be challenging to grok at first, so, I used this method to learn them (and still use it, because I'm old and slow to learn): I consult this web page on flex boxes:&nbsp; <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a> And then I use jsfiddle to create the skeleton of what I want to do so I can see it in near real time. I put different colored borders around the container and the flex items so I can see how they interact with each other as I change the different settings. &nbsp;This has saved me a ton of time, because then I just take the code and CSS (which I do in roll20 standards so copy/paste is easier) and plop them into my character sheets. But for existing sheets...yeah, kinda tricky, I would imagine, but it's doable...just use jsfiddle to get the layout right. ;)