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

HTML / CSS Notes textarea will not size properly

Okay, going CrAzY.... I have a notes text box, it's just a big textarea.  I want the text to be fully revealed within the box it's in.  But it won't go lower... Here's the HTML <input type="checkbox" class="tab tab10" name="attr_core-tab10" value="10" title="History" /> <span class="tab tab10" style='line-height: 40px;'>Notes</span> <div class="section-notes"> <div class="notes-outer-container"> <div class="notes-internal-container text"> <div class="widget borderedContainer"> <textarea class="onecolumntextarea" name="attr_notes"></textarea> </div> </div> </div> </div> Here's my entire CSS charsheet input.sheet-tab10:checked ~ div.sheet-section-notes { /* Dimensions */ width: 700px; height: 690px; /* Position it so it is to the right of the button */ margin-top: 0px; margin-left: 0px; /* Border */ border-style: inset; border-radius: 0px 15px 15px 15px; border-width: 2px; border-color: rgba(255, 215, 0, 1); /* Transition effect when you open it */ opacity: 1; transform: scale(1) translateX(120px) translateY(-41px); } charsheet input.sheet-tab10:checked ~ div.sheet-section-notes { /* Dimensions */ width: 700px; height: 690px; /* Position it so it is to the right of the button */ margin-top: 0px; margin-left: 0px; /* Border */ border-style: inset; border-radius: 0px 15px 15px 15px; border-width: 2px; border-color: rgba(255, 215, 0, 1); /* Transition effect when you open it */ opacity: 1; transform: scale(1) translateX(120px) translateY(-41px); } .sheet-internal-container { width: 690px; padding: 10px; } .sheet-notes-internal-container { width: 690px; height: 495px; padding: 10px; } .sheet-outer-container { width: 730px; height: 495px; overflow-x: hidden; overflow-y: auto; } .sheet-attributes-outer-container { width: 730px; height: 500px; overflow-x: hidden; overflow-y: auto; } .sheet-education-outer-container { width: 730px; height: 230px; overflow-x: hidden; overflow-y: auto; } .sheet-general-skills-outer-container { width: 730px; height: 395px; overflow-x: hidden; overflow-y: auto; } .sheet-combat-outer-container { height: 650px; } .sheet-notes-outer-container { width: 730px; height: 495px; overflow-x: hidden; overflow-y: auto;
1649322220

Edited 1649324176
GiGs
Pro
Sheet Author
API Scripter
You have a lot of probably unneccessary divs there. I'd probably change it to <div class="section-notes"> <textarea class="onecolumntextarea" name="attr_notes"></textarea> </div> or maybe (?) <div class="section-notes"> <div class="widget borderedContainer"> <textarea class="onecolumntextarea" name="attr_notes"></textarea> </div> </div> Anyway, for the matter at hand, you probably want to apply size directly to the textarea: textarea.sheet-onecolumntextarea {     width: 690px;     height: 490px; } The dimensions you need might be different - just getting the method across.
1649322376
Finderski
Plus
Sheet Author
Compendium Curator
A couple things I've noticed...is the sheet using Legacy Sanitization? If not, then you need to get rid of sheet- in the CSS, because you aren't using sheet- in the html. In a couple of places you use charsheet that should be .charsheet Don't know if those are all the problems, don't have time to dig into it more, at the moment, but those are the things that jump out immediately.
1649324246

Edited 1649324313
GiGs
Pro
Sheet Author
API Scripter
Good spots Finderski, especially on .charsheet . I changed my example to use legacy sanitisation (including the sheet- part). The first thing I thought when they announced CSE was, that's going to create a lot of confusion and complications when answering questions.
1649333696

Edited 1649334516
Andreas J.
Forum Champion
Sheet Author
Translator
I think with the textarea and maybe inputs too, there was a thing about the default box-sizing being one of the reasons they are harder to style than one would expect. In retrospection, this have been an issue in every sheet I've made, and it's unfortunate I didn't learn about it earlier. Check out the example at <a href="https://wiki.roll20.net/BCS/CSS#textarea" rel="nofollow">https://wiki.roll20.net/BCS/CSS#textarea</a> From: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing</a> Note: It is often useful to set box-sizing to border-box to layout elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute , use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.
1649341505
GiGs
Pro
Sheet Author
API Scripter
That looks handy to know, but that said: I've never had a problem sizing textarea or inputs. Though that doesnt necessarily mean anything, it can depend a lot of the rest of the CSS we use.
Finderski said: A couple things I've noticed...is the sheet using Legacy Sanitization? If not, then you need to get rid of sheet- in the CSS, because you aren't using sheet- in the html. In a couple of places you use charsheet that should be .charsheet Don't know if those are all the problems, don't have time to dig into it more, at the moment, but those are the things that jump out immediately. Yes, sanitation is on :( I need to hire someone to clean up the code so it's not using tables.&nbsp; Know anyone who wants to make a $4.25? hahahaha
OMGOMGOMGOMGOMGOMGOMGOMGOMG Thank you guys so much!!!!! It worked @GiGs !!! Thanks guys!