Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

textarea css frustration

1635484282
Alan S.
Pro
Sheet Author
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?
1635489207

Edited 1635489324
Andreas J.
Forum Champion
Sheet Author
Translator
 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; }
1635522799
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
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.
1635530455
Alan S.
Pro
Sheet Author
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; }
1635534371
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
ah, good to know. I usually do a hard reset on everything when I start styling my sheet, so I hadn't noticed that.
1635538902
Andreas J.
Forum Champion
Sheet Author
Translator
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>
1635568165
Alan S.
Pro
Sheet Author
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.
1635569799

Edited 1635569871
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
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.