Bootstrap and JqueryUI updates

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 steve@roll20.net. We will attempt same day turn around to get your fixes live.

Will do.  Thanks for the update Steve.

Fix submitted yesterday for the Pathfinder Community sheet diminished font-sizes: https://github.com/Roll20/roll20-character-sheets/pull/3881

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.

There's some new rules regarding tables in the chat window. Looks like this is your culprit:

.content table>thead>tr>th, .content table>tbody>tr>th, .content table>tfoot>tr>th, .content table>thead>tr>td, .content table>tbody>tr>td, .content table>tfoot>tr>td, .note-editor table>thead>tr>th, .note-editor table>tbody>tr>th, .note-editor table>tfoot>tr>th, .note-editor table>thead>tr>td, .note-editor table>tbody>tr>td, .note-editor table>tfoot>tr>td { border: 1px solid #ddd }

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>thead>tr>th, 
.content table>tbody>tr>th, 
.content table>tfoot>tr>th, 
.content table>thead>tr>td, 
.content table>tbody>tr>td, 
.content table>tfoot>tr>td, 
.note-editor table>thead>tr>th, 
.note-editor table>tbody>tr>th, 
.note-editor table>tfoot>tr>th, 
.note-editor table>thead>tr>td, 
.note-editor table>tbody>tr>td, 
.note-editor table>tfoot>tr>td { 
    padding: 0px !important; /* 8px; */
    line-height: 1.42857143;
    vertical-align: top;
    border: 0; /* 1px solid #ddd */
    
}

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>thead>tr>th, 
.sheet-rolltemplate-KAP-scroll  table>tbody>tr>th, 
.sheet-rolltemplate-KAP-scroll  table>tfoot>tr>th, 
.sheet-rolltemplate-KAP-scroll table>thead>tr>td, 
.sheet-rolltemplate-KAP-scroll table>tbody>tr>td, 
.sheet-rolltemplate-KAP-scroll table>tfoot>tr>td { 
    padding: 0px; 
    line-height: 1.42857143;
    vertical-align: top;
    border: 0; /* 1px solid #ddd */
    
}

@GG I had to adjust this in my API, too. Try

border: none;

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)>thead>tr>th { border: none }

We're (well, you're) getting there, Jakob. That removed the inner gridlines, but the outer border remains.

Correction: Kirsty's suggestion to change to border:none in the original code also had this effect.

But I'm still left with a single border, around the tbody element I think. 

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?

1. 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.
2. 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 :not(div) to artificially increase specificity. Or just add a class to the table, then you can target that class.

Thanks, Jakob. I spent waaay too much time scouring the tbody section. 

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>thead>tr>th, 
.sheet-rolltemplate-KAP-scroll table>tbody>tr>th, 
.sheet-rolltemplate-KAP-scroll table>tfoot>tr>th, 
.sheet-rolltemplate-KAP-scroll table>thead>tr>td, 
.sheet-rolltemplate-KAP-scroll table>tbody>tr>td, 
.sheet-rolltemplate-KAP-scroll table>tfoot>tr>td { 
    padding: 0px;
    border: none; 
}
.sheet-rolltemplate-KAP-scroll table {
    border: none; 
    margin: 0;
}

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.

Thanks Steve! Shit happens, live, learn and moving on.

Here's my take on this which makes this slightly less annoying to write.

1. Give all of your tables a class.
2. Reference that class in all your table-related CSS.

Example (HTML)

<rolltemplate class="sheet-rolltemplate-example">
  <table class="sheet-rt-table">
    <!-- some content -->
  </table>
</rolltemplate>

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 .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.

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,  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. 

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,  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. 

Yes, you're right, this could have happened similarly with another setup. Kneejerk anti-table reaction from my side!

And there are some 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.

Jakob said:

Perhaps someone *cough* should find the time to update some parts of it.

"But who will bell the cat?"

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 but i wondered if anyone else had noticed this?

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 & Thread Repository"