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

October 29 (3 years ago)
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?

October 29 (3 years ago)

Edited October 29 (3 years ago)
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;
}
October 29 (3 years ago)
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.

October 29 (3 years ago)
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;
}
October 29 (3 years ago)
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.

October 29 (3 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

oh man, this is good.

added to wiki: https://wiki.roll20.net/CSS_Wizardry#textarea

October 30 (3 years ago)
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?  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.

October 30 (3 years ago)

Edited October 30 (3 years ago)
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{
  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.