textarea css frustration

So, The textarea in my character sheet is out of whack with the rest of my elements, and I'm not sure why. Both the textarea seen in the bottom right and the input elements seen above it on the page have their width set to 100%.  but the textarea extends to the edge of the background image, while the other elements do not. inspecting the html, I see that there's 10 px of padding that is built into the .charsheet as part of roll20's default CSS.  All the other elements seem to be respecting it, but the textarea is not.  What's going on?

 just kinda behaves like that. I've had multiple places where I have textareas to have something like 80% to 95% width/height, depending on the place. Example: my default textarea for my latest sheet : .charsheet textarea { width: 90%; height: 85%; background-color: transparent; }

To really answer the question, we'd need to see the html and css code. Art a guess it's something with the elements that things are nested in, but I've got no idea which method you're using for the layout.

Playing around with it more, I realize it's a box sizing issue.  For some reason, the default for the input elements is box -sizing: border-box, while the default for the textarea was box-sizing: content-box.  Explicitly adding a box-sizing to my textarea css, seen below, fixed the problem. textarea.textbox { resize: none; box-sizing: border-box; height: 231px; }

ah, good to know. I usually do a hard reset on everything when I start styling my sheet, so I hadn't noticed that.

oh man, this is good. added to wiki: <a href="https://wiki.roll20.net/CSS_Wizardry#textarea" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#textarea</a>

Scott C. said: ah, good to know. I usually do a hard reset on everything when I start styling my sheet, so I hadn't noticed that. Do you have any advice or guides on how to do hard resets like that?&nbsp; Just starting to seriously use css, and figuring out how the existing roll20 css is affecting any given part of the sheet has been a huge challenge.

I typically do something like this (from an in progress project): .ui-dialog .charsheet select , .ui-dialog .charsheet textarea , .ui-dialog .charsheet input , .ui-dialog .charsheet .uneditable-input , .ui-dialog .charsheet label , .ui-dialog .charsheet button { &nbsp; all : initial ; } You can use unset instead of initial to really unset it, but that's a little harder than I like because you wind up with radios and checkboxes with appearance:none on them, which is useful sometimes, but other times not so much.