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

Bootstrap and JqueryUI updates

1530216722
Stephen Koontz
Forum Champion
Marketplace Creator
Sheet Author
API Scripter
Compendium Curator
Hi Sheet Authors, When updating the text editor across Roll20 we knew we needed to upgrade some core Javascript libraries that had gotten out of date. Where I messed up as the Lead Designer is that I didn't anticipate how those changes would conflict between other libraries we were using in our test environment vs the versions on the live production environment. This meant we had to make some changes to the versions at the 11th hour that causes CSS changes to the whole site. This in turn affected your character sheets. For that I'm very sorry. After discussing these changes with the team, changes that move Roll20 to be more web standard compliant, we're not going to roll back the updates. However, we're very aware that this his inconvenienced you and the players who use your sheets. We will do our best to assist you sheet authors in correcting these changes. For any styling corrections caused by the update, we will accept and deploy these changes outside of our normal schedule. Let us know the purpose of the pull request in the title of your pull request and feel free to escalate them directly to me personally at <a href="mailto:steve@roll20.net" rel="nofollow">steve@roll20.net</a>. We will attempt same day turn around to get your fixes live.
1530218967
vÍnce
Pro
Sheet Author
Will do.&nbsp; Thanks for the update Steve.
1530275764
vÍnce
Pro
Sheet Author
Fix submitted yesterday for the Pathfinder Community sheet diminished&nbsp;font-sizes:&nbsp; <a href="https://github.com/Roll20/roll20-character-sheets/pull/3881" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/pull/3881</a>
1530285356
GiGs
Pro
Sheet Author
API Scripter
I've a roll template that looks like this, and I can't figure out what CSS is causing the grey border lines, so I can't remove them. Any help? I've figured out how to fix the expanded padding, but those grey lines shouldnt be there and I can't find the CSS that's causing them.
1530285892
Jakob
Sheet Author
API Scripter
There's some new rules regarding tables in the chat window. Looks like this is your culprit: .content table&gt;thead&gt;tr&gt;th, .content table&gt;tbody&gt;tr&gt;th, .content table&gt;tfoot&gt;tr&gt;th, .content table&gt;thead&gt;tr&gt;td, .content table&gt;tbody&gt;tr&gt;td, .content table&gt;tfoot&gt;tr&gt;td, .note-editor table&gt;thead&gt;tr&gt;th, .note-editor table&gt;tbody&gt;tr&gt;th, .note-editor table&gt;tfoot&gt;tr&gt;th, .note-editor table&gt;thead&gt;tr&gt;td, .note-editor table&gt;tbody&gt;tr&gt;td, .note-editor table&gt;tfoot&gt;tr&gt;td { border: 1px solid #ddd }
1530286457
GiGs
Pro
Sheet Author
API Scripter
The padidng in that section is causing the stretching too. But i can't figure out how to overwrite it. Putting this in my CSS does nothing: .content table&gt;thead&gt;tr&gt;th, .content table&gt;tbody&gt;tr&gt;th, .content table&gt;tfoot&gt;tr&gt;th, .content table&gt;thead&gt;tr&gt;td, .content table&gt;tbody&gt;tr&gt;td, .content table&gt;tfoot&gt;tr&gt;td, .note-editor table&gt;thead&gt;tr&gt;th, .note-editor table&gt;tbody&gt;tr&gt;th, .note-editor table&gt;tfoot&gt;tr&gt;th, .note-editor table&gt;thead&gt;tr&gt;td, .note-editor table&gt;tbody&gt;tr&gt;td, .note-editor table&gt;tfoot&gt;tr&gt;td { padding: 0px !important; /* 8px; */ line-height: 1.42857143; vertical-align: top; border: 0; /* 1px solid #ddd */ } I dont really understand CSS hierarchies. my roll template's css label is&nbsp;.sheet-rolltemplate-KAP-scroll btw.
1530286752
GiGs
Pro
Sheet Author
API Scripter
Aha, I figured out how to do that, but it's not fixing the borders. The following code removes the extra spacing, but the grey lines are still there. Are they coming from somewhere else, or is my border line wrong? .sheet-rolltemplate-KAP-scroll table&gt;thead&gt;tr&gt;th, .sheet-rolltemplate-KAP-scroll table&gt;tbody&gt;tr&gt;th, .sheet-rolltemplate-KAP-scroll table&gt;tfoot&gt;tr&gt;th, .sheet-rolltemplate-KAP-scroll table&gt;thead&gt;tr&gt;td, .sheet-rolltemplate-KAP-scroll table&gt;tbody&gt;tr&gt;td, .sheet-rolltemplate-KAP-scroll table&gt;tfoot&gt;tr&gt;td { padding: 0px; line-height: 1.42857143; vertical-align: top; border: 0; /* 1px solid #ddd */ }
1530286900
Kirsty
Pro
Sheet Author
@GG I had to adjust this in my API, too. Try border: none;
1530287064

Edited 1530287077
Jakob
Sheet Author
API Scripter
Maybe it's a specificity problem, your code has the exact same specificity as the Roll20 one, so it depends on which one happens to appear first. Maybe try to artificially increase the specificity (btw, I don't know what you're using here, Roll20, but it is pretty incovenient for sheet authors to have fight such specific CSS...): .sheet-rolltemplate-KAP-scroll table:not(div)&gt;thead&gt;tr&gt;th { border: none }
1530287639
GiGs
Pro
Sheet Author
API Scripter
We're (well, you're) getting there, Jakob. That removed the inner gridlines, but the outer border remains.
1530288698

Edited 1530288998
GiGs
Pro
Sheet Author
API Scripter
Correction: Kirsty's suggestion to change to border:none &nbsp;in the original code also had this effect. But I'm still left with a single border, around the tbody element I think.&nbsp; Edit: also there seems to be a bunch of padding between the tbody bottom and table bottom for some reason. In this pic, the grey rectangle is tbody (surrounded by an unwanted border), and the orange bit is after tbody . Why is that there?
1530290380

Edited 1530290439
Jakob
Sheet Author
API Scripter
Then just target the tbody element using the same technique, and set it's border to none as well. CORRECTION: After inspecting it myself, the border is set on the table, not the tbody. The orange thing below the table is a margin on all table elements in the chat, which the new CSS has helpfully introduced. Just set the table's margin to 0 and you should be good. As before, for both of these things, you can use e.g&nbsp; :not(div) &nbsp;to artificially increase specificity. Or just add a class to the table, then you can target that class.
1530291084
GiGs
Pro
Sheet Author
API Scripter
Thanks, Jakob. I spent waaay too much time scouring the tbody section.&nbsp; For anyone with a similar issue, the code below fixed the rolltemplate table issues introduced by this patch. Just replace with your rolltemplate class. .sheet-rolltemplate-KAP-scroll table&gt;thead&gt;tr&gt;th,&nbsp; .sheet-rolltemplate-KAP-scroll&nbsp;table&gt;tbody&gt;tr&gt;th,&nbsp; .sheet-rolltemplate-KAP-scroll&nbsp;table&gt;tfoot&gt;tr&gt;th,&nbsp; .sheet-rolltemplate-KAP-scroll table&gt;thead&gt;tr&gt;td,&nbsp; .sheet-rolltemplate-KAP-scroll table&gt;tbody&gt;tr&gt;td,&nbsp; .sheet-rolltemplate-KAP-scroll table&gt;tfoot&gt;tr&gt;td {&nbsp; &nbsp; &nbsp; padding: 0px; &nbsp; &nbsp; border: none; } .sheet-rolltemplate-KAP-scroll table { &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; margin: 0; }
1530303507
Wes
Sheet Author
G G said: For anyone with a similar issue, the code below fixed the rolltemplate table issues introduced by this patch. Just replace with your rolltemplate class. Thanks for the heads up on this GG.
1530317207
Giger
Pro
API Scripter
Thanks Steve! Shit happens, live, learn and moving on.
1530536091

Edited 1530536239
Jakob
Sheet Author
API Scripter
Here's my take on this which makes this slightly less annoying to write. Give all of your tables a class. Reference that class in all your table-related CSS. Example (HTML) &lt;rolltemplate class="sheet-rolltemplate-example"&gt; &lt;table class="sheet-rt-table"&gt; &lt;!-- some content --&gt; &lt;/table&gt; &lt;/rolltemplate&gt; Example (CSS) .sheet-rolltemplate-example .sheet-rt-table { margin: 0; border: none; } .sheet-rolltemplate-example .sheet-rt-table td, .sheet-rolltemplate-example .sheet-rt-table th { padding: 0; border: none; } Of course, you can change those borders, paddings, and margins as disabled, as well as use more specific rules if you want to (after the beginning&nbsp; .sheet-rolltemplate-example .sheet-rt-table ). By adding a class to the table, you're making sure that the specificity is always higher than Roll20's builtin classes, so the roll20 rules are going to be overridden. Technical note: all of roll20's classes regarding tables have a specificity of (0,1,x,y), whereas this type of rule has a specificity of at least (0,2,u,v). No matter x,y,u,v, the latter always wins out. Technical note 2: Don't use tables. Seriously.
1530543468
GiGs
Pro
Sheet Author
API Scripter
This does look like a superior approach. I understand the admonition not to use tables*, but it doesn't really seem appropriate in this case where tables were working fine,&nbsp; until the devs made an undocumentated change to backend. This could have happened just as easily with grids, or any other css element. *though I feel it necessary to point out that people new to html and css and looking at the wiki for guidance on how to create their first character sheet will find advice recommending that they use tables for rolltemplates. Here's the relevant quote and the page link: After that, it's up to you to decide how to structure your roll. We recommend a table layout, but it's up to you. &nbsp;
1530554576
Jakob
Sheet Author
API Scripter
G G said: This does look like a superior approach. I understand the admonition not to use tables*, but it doesn't really seem appropriate in this case where tables were working fine,&nbsp; until the devs made an undocumentated change to backend. This could have happened just as easily with grids, or any other css element. *though I feel it necessary to point out that people new to html and css and looking at the wiki for guidance on how to create their first character sheet will find advice recommending that they use tables for rolltemplates. Here's the relevant quote and the page link: After that, it's up to you to decide how to structure your roll. We recommend a table layout, but it's up to you. &nbsp; Yes, you're right, this could have happened similarly with another setup. Kneejerk anti-table reaction from my side! And there are some &nbsp;roll template designs where tables are indeed the correct choice. (side remark: the wiki has some questionable guidance for character sheet authors in some parts, since it's pretty outdated. Perhaps someone *cough* should find the time to update some parts of it.
1530556667
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Jakob said: Perhaps someone *cough* should find the time to update some parts of it. "But who will bell the cat?"
1530570435
GiGs
Pro
Sheet Author
API Scripter
Some new weirdness: my custom character sheet is not loading external images as of today. That picture I posted above, with the elongated shield: it was appearing fine over the weekend. But now it, and all other external images in the sheet are refusing to load. I posted a bug report here &nbsp;but i wondered if anyone else had noticed this?
1530570914
GiGs
Pro
Sheet Author
API Scripter
Aha, false alarm (whew). It was a chrome extension interfering, that just updated earlier today.
Hello everyone! In an effort to keep the forums organized this thread has been unstickied and will instead be available through the stickied post titled " Character Sheet FAQ &amp; Thread Repository "