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

Need help with using overflow in CSS

1555280105

Edited 1555280214
Rin Vindor
Sheet Author
Hey folks I'm still a noob at CSS in general and kinda find myself stumbling through it pretty often. I'd really appreciate it if someone could help me learn how to do this properly as trial by error has not gotten me very far. Thank you for anyone who tries to lend a hand :) Anyway I'm trying to get a scroll bar for the later half of a roll template design. Like this image below. Here is my current css for the roll template&nbsp; <a href="https://pastebin.com/9TpB9K9j" rel="nofollow">https://pastebin.com/9TpB9K9j</a> Here is my current HTML for the roll template&nbsp; <a href="https://pastebin.com/zckAEcLe" rel="nofollow">https://pastebin.com/zckAEcLe</a> So far this gets me this as a result for my roll template
1555287875

Edited 1555288111
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
You need to set a maximum height on the container that you want to get the scroll bar. So, your rdesc css declaration should be this: .sheet-rolltemplate-wodritual .sheet-rdesc { &nbsp; &nbsp; font-size: 1.0em; &nbsp; &nbsp; text-align: left; &nbsp; &nbsp; position: relative; /* may be needed for this scroll bar? */ &nbsp; &nbsp; overflow-x: auto; /* This should add a scroll bar to the roll template&nbsp; pt 3*/&nbsp; &nbsp; &nbsp; overflow-y: auto; /* This should add a scroll bar to the roll template&nbsp; pt 3*/&nbsp; &nbsp; &nbsp; overflow: auto; /* The overflow is clipped, and a scrollbar is added to see the rest of the content*/ &nbsp; &nbsp; max-height:100px; &nbsp; &nbsp; color: rgb(112, 0, 0);&nbsp; &nbsp; &nbsp; /* padding-bottom: 20px; */ } EDIT: I would also recommend making your table declaration not be set to a hardcoded height (or really width) as then it can't scale with input at all and you'll have to change the height any time you want to add additional fields. Really, I'd recommend not using html tables to layout your roll template, but as long as you aren't planning to submit the sheet to the repository it's only advice.
1555297927

Edited 1555298201
Rin Vindor
Sheet Author
Scott C. said: You need to set a maximum height on the container that you want to get the scroll bar. So, your rdesc css declaration should be this: .sheet-rolltemplate-wodritual .sheet-rdesc { &nbsp; &nbsp; font-size: 1.0em; &nbsp; &nbsp; text-align: left; &nbsp; &nbsp; position: relative; /* may be needed for this scroll bar? */ &nbsp; &nbsp; overflow-x: auto; /* This should add a scroll bar to the roll template&nbsp; pt 3*/&nbsp; &nbsp; &nbsp; overflow-y: auto; /* This should add a scroll bar to the roll template&nbsp; pt 3*/&nbsp; &nbsp; &nbsp; overflow: auto; /* The overflow is clipped, and a scrollbar is added to see the rest of the content*/ &nbsp; &nbsp; max-height:100px; &nbsp; &nbsp; color: rgb(112, 0, 0);&nbsp; &nbsp; &nbsp; /* padding-bottom: 20px; */ } EDIT: I would also recommend making your table declaration not be set to a hardcoded height (or really width) as then it can't scale with input at all and you'll have to change the height any time you want to add additional fields. Really, I'd recommend not using html tables to layout your roll template, but as long as you aren't planning to submit the sheet to the repository it's only advice. I really appreciate the feedback, maybe I'm misunderstanding but I removed the width and height from the table declaration and it caused this issue, I also plugged the css that you posted above at the same time and this is what I'm getting on a post. I tried to use padding on the table declaration for both left and right but its not working. As for submitting the sheet, this is a sheet on the repository that I've taken over the care of which is the Vampire the Masquerade 20th Anniversary sheet, its been left without updates for 5 years so I took over and I've revamped a ton of stuff already but the rolltemplate stuff is where I'm still a scrub and still learning.
So after more work I've managed to clean things up further but I'm still not sure what the issue would be with having HTML in the roll template. If you could elaborate it'd probably help me avoid issues. Also I'm still not getting this scroll bar to function even with a max height set. Here is my current css for the roll template&nbsp; <a href="https://pastebin.com/9TpB9K9j" rel="nofollow">https://pastebin.com/9TpB9K9j</a> Here is my current HTML for the roll template&nbsp; <a href="https://pastebin.com/zckAEcLe" rel="nofollow">https://pastebin.com/zckAEcLe</a> Again I appreciate you helping me and anyone else who stops by! :)
1555307116
Jakob
Sheet Author
API Scripter
Why are you using tables? Try using divs instead, that might help.
I'll give that a shot Jakob, I was initially using tables as that was the tools provided in the Roll Templates link for the WoD sheet and I kinda built from that. Its the very last thing on the page. <a href="https://wiki.roll20.net/Roll_Templates#Creating_a_Roll_Template" rel="nofollow">https://wiki.roll20.net/Roll_Templates#Creating_a_Roll_Template</a>
So I just wanted to report basically a full success! I seriously appreciate both of you guys for helping me and taking time out of your days to lend a rookie a hand! :) I'll be swapping my templates to divs completely. Though I do have one curious question, since the wiki shows both, what is the major advantage of using divs over tables?
Actually an additional question you guys probably can answer, I am trying to change the scroll bar and make it thinner I know it uses something to do with&nbsp;::-webkit-scrollbar but I'm not sure how to utilize it. Again you guys rock for all your help thus far!
1555441322
Jakob
Sheet Author
API Scripter
Rin Vindor said: I'll be swapping my templates to divs completely. Though I do have one curious question, since the wiki shows both, what is the major advantage of using divs over tables? Philosophically: tables have the semantics of tabular data. If what you're putting into the table is not tabular data, the semantics of your markup is not in line with semantics of the content. Practically: tables were never meant to do layout, and they don't work particularly well for it, since you don't really have good control over how the browser actually displays the result (as you have found out yourself). Plus they're terrible for responsive design (less important for Roll20, since you don't have to serve phones).
1555450468
vÍnce
Pro
Sheet Author
Rin Vindor said: Actually an additional question you guys probably can answer, I am trying to change the scroll bar and make it thinner I know it uses something to do with&nbsp;::-webkit-scrollbar but I'm not sure how to utilize it. Again you guys rock for all your help thus far! I think all you need to do is add a line in your css that applies the "::-webkit-scrollbar" to the applicable class &nbsp;example; .sheet-rdesc::-webkit-scrollbar { &nbsp;&nbsp;&nbsp;&nbsp;width: 5px; }
Jakob said: Rin Vindor said: I'll be swapping my templates to divs completely. Though I do have one curious question, since the wiki shows both, what is the major advantage of using divs over tables? Philosophically: tables have the semantics of tabular data. If what you're putting into the table is not tabular data, the semantics of your markup is not in line with semantics of the content. Practically: tables were never meant to do layout, and they don't work particularly well for it, since you don't really have good control over how the browser actually displays the result (as you have found out yourself). Plus they're terrible for responsive design (less important for Roll20, since you don't have to serve phones). I appreciate the break down and explanation! :) Vince said: Rin Vindor said: Actually an additional question you guys probably can answer, I am trying to change the scroll bar and make it thinner I know it uses something to do with&nbsp;::-webkit-scrollbar but I'm not sure how to utilize it. Again you guys rock for all your help thus far! I think all you need to do is add a line in your css that applies the "::-webkit-scrollbar" to the applicable class &nbsp;example; .sheet-rdesc::-webkit-scrollbar { &nbsp;&nbsp;&nbsp;&nbsp;width: 5px; } I gave your suggestion a shot and spent about 2 hours last night trying similar efforts but nothing seems to slim that pesky scroll bar.
1555490102
Finderski
Pro
Sheet Author
Compendium Curator
Rin Vindor said: I gave your suggestion a shot and spent about 2 hours last night trying similar efforts but nothing seems to slim that pesky scroll bar. Are you using Firefox? &nbsp;I read on Stackoverflow that Firefox doesn't support modifying the scrollbar...
1555508869
Andreas J.
Forum Champion
Sheet Author
Translator
Finderski said: Are you using Firefox? &nbsp;I read on Stackoverflow that Firefox doesn't support modifying the scrollbar... You know you're doing something right when your hobbies needs to involve StackOverflow
1555509387
Finderski
Pro
Sheet Author
Compendium Curator
Andreas J. said: Finderski said: Are you using Firefox? &nbsp;I read on Stackoverflow that Firefox doesn't support modifying the scrollbar... You know you're doing something right when your hobbies needs to involve StackOverflow At least I'm doing something right... LOL XD
1555510397
vÍnce
Pro
Sheet Author
According to StackOverflow I'm always doing something wrong.&nbsp; ;-P
1555511079
Finderski
Pro
Sheet Author
Compendium Curator
Vince said: According to StackOverflow I'm always doing something wrong.&nbsp; ;-P Same... :-/
1555519194
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Finderski said: Rin Vindor said: I gave your suggestion a shot and spent about 2 hours last night trying similar efforts but nothing seems to slim that pesky scroll bar. Are you using Firefox? &nbsp;I read on Stackoverflow that Firefox doesn't support modifying the scrollbar... Yep, this is why it's kind of pointless to attempt to edit the scroll bar. Meant to point this out earlier, but RL got in the way. Additionally, what system you are using also affects how your scroll bar looks. On a PC using chrome and firefox, you get the thick permanently visible scrollbar that I think of as the classic version. On a Mac using firefox or chrome though you get a thin, visible only while actively scrolling, bar. This means that any edits of the scrollbar that you did would require specific css declarations for mac and PC.
I really appreciate everyone's feed back, (I'm also using Chrome) but yeah I had read similar things about Firefox on SO but wasn't sure about Chrome and couldn't find much. I hadn't considered the Mac side of things either so thanks for point that out Scott!