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

[HELP] Quick CSS-related API question

1523072757
Missingquery
Sheet Author
API Scripter
So while this is technically API related, it deals more with the CSS side of things, so I thought it'd be more prudent to put it over here. Feel free to move it if it's not relevant enough. So I'm attempting to style some API messages that are output to the chat. This is my code: //adapted from Ciorstaidh's Faerun Calendar css         var divstyle = 'style="width: 189px; border: 1px solid #353535; background-color: #f3f3f3; padding: 5px; color: #353535;"'         var tablestyle = 'style="text-align:center; margin: 0 auto; border-collapse: collapse; margin-top: 5px; border-radius: 2px"';         var headstyle = 'style="color: #f3f3f3; font-size: 18px; text-align: left; font-variant: small-caps; background-color: #353535; padding: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"';         var cellstyle = 'style="border: 1px solid #353535; border-radius: 2px;"';         var rowstyle = 'style="border: 1px solid #353535"';                  sendChat(who, '<div ' + divstyle + '>' + //--             '<div ' + headstyle + '>Combat</div>' + //--             '<table ' + tablestyle + '>' + //--             '<tr><th ' + cellstyle + '> ' + AName + '</th><th '+ cellstyle +'>' + DName + '</th></tr>' + //--             '<tr><td ' + cellstyle + '> Dmg: ' + DmgA + '</td><td ' + cellstyle + '> Dmg: ' + DmgB + '</td></tr>' + //--             '<tr><td ' + cellstyle +'> Hit: ' + (HitA - AvoB) + '</td><td ' + cellstyle + '> Hit: ' + (HitB - AvoA) + '</td></tr>' + //--             '<tr><td ' + cellstyle +'> Crit: ' + CritA + '</td><td ' + cellstyle + '> Crit: ' + CritB + '</td></tr>' + //--             '</table>' + //--             '</div>'         ); Which looks like this: Now, I want to round the corners of the internal table, which I have attempted to do with this- border-radius: 2px; But trying this on neither the table itself nor the individual tables seems to work. I even tried manually editing the styles of each cell via Inspect Element, but that didn't work either. Basically, is there some possible way to round the corners of a border-collapsed table using inline CSS?
1523090062
Jakob
Sheet Author
API Scripter
Maybe this will help:  Stackoverflow
1523106341
Missingquery
Sheet Author
API Scripter
Hmmm. Sort of, but not really? You can't really use selectors in inline CSS, and when trying to specifically style the individual cells or individual rows instead, it doesn't seem to change anything either... though in Firefox's Inspect Element Computed Styles tab, it still tells me that the radius has been set to that, so it doesn't seem to have been overwritten by anything either. This is my new and updated code (yields the same result, visually) //adapted from Ciorstaidh's Faerun Calendar css         var divstyle = 'style="width: 189px; border: 1px solid #353535; background-color: #f3f3f3; padding: 5px; color: #353535;"'         var tablestyle = 'style="text-align:center; margin: 0 auto; border-collapse: collapse; margin-top: 5px; border-radius: 2px"';         var headstyle = 'style="color: #f3f3f3; font-size: 18px; text-align: left; font-variant: small-caps; background-color: #353535; padding: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"';         var cellstyle = 'style="border: 1px solid #353535; border-radius: 2px;"';         var rowstyle = 'style="border: 1px solid #353535"';                  sendChat(who, '<div ' + divstyle + '>' + //--             '<div ' + headstyle + '>Combat</div>' + //--             '<table ' + tablestyle + '>' + //--             '<tr><th ' + cellstyle + '> ' + AName + '</th><th '+ cellstyle +'>' + DName + '</th></tr>' + //--             '<tr><td ' + cellstyle + '> Dmg: ' + DmgA + '</td><td ' + cellstyle + '> Dmg: ' + DmgB + '</td></tr>' + //--             '<tr><td ' + cellstyle +'> Hit: ' + (HitA - AvoB) + '</td><td ' + cellstyle + '> Hit: ' + (HitB - AvoA) + '</td></tr>' + //--             '<tr style="border: 1px solid #353535; border-bottom-left-radius: 2px;"><td style="border: 1px solid #353535; border-bottom-left-radius: 2px;"> Crit: ' + CritA + '</td><td ' + cellstyle + '> Crit: ' + CritB + '</td></tr>' + //--             '</table>' + //--             '</div>'         );
1523108375
Missingquery
Sheet Author
API Scripter
Actually, I have another question. Does Roll20's HTML/CSS parser support flexboxes, and if not, what's the easiest way to horizontally align content? I've reworked my code to be this (not using tables entirely): var divstyle = 'style="width: 189px; border: 1px solid #353535; background-color: #f3f3f3; padding: 5px; color: #353535;"'         var tablestyle = 'style="text-align:center; margin: 0 auto; border-collapse: collapse; margin-top: 5px; border-radius: 2px"';         var headstyle = 'style="color: #f3f3f3; font-size: 18px; text-align: left; font-variant: small-caps; background-color: #353535; padding: 2px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"';         var namestyle = 'style="background-color: #353535; color: #f3f3f3; text-align: center; display: inline-block; width: 45%; margin-top: 4px; border-radius: 10px; font-family: Helvetica, Arial, sans-serif;"'         var wrapperstyle = 'style="display:flex; justify-content: center; padding:2px;"'         sendChat(who, '<div ' + divstyle + '>' + //--             '<div ' + headstyle + '>Combat</div>' + //--             '<div ' + wrapperstyle +'>' + //--             '<div ' + namestyle + '>'+ AName +'</div>' + //--             '<div ' + namestyle + '>'+ DName +'</div>' + //--             '</div>' + //--             '</div>'         ); Which returns this: Now, inspecting the element reveals that the "display: flex" and "justify-content: center" seem to have been completely 'snipped out' of the div. I'm assuming that this means that Roll20 doesn't support flexboxes at all, but if that's the case, then how can I horizontally align these two divs easily?
1523109341

Edited 1523109678
Jakob
Sheet Author
API Scripter
Hmmm. Sort of, but not really? You can't really use selectors in inline CSS, and when trying to specifically style the individual cells or individual rows instead, it doesn't seem to change anything either... though in Firefox's Inspect Element Computed Styles tab, it still tells me that the radius has been set to that, so it doesn't seem to have been overwritten by anything either. I haven't read the stuff too closely, but you should not need selectors, you just inline everything. But apparently, border-collapse: collapse is incompatible with a border-radius. The easiest solution seems to be suggested in one of the answers: wrap the whole table in a <div>, then set the border and border-radius on the <div>, and set overflow:hidden on the <div>. Now, inspecting the element reveals that the "display: flex" and "justify-content: center" seem to have been completely 'snipped out' of the div. I'm assuming that this means that Roll20 doesn't support flexboxes at all, but if that's the case, then how can I horizontally align these two divs easily? That's a shame, display: flex is  supported in character sheets and roll templates, but apparently gets filtered out by the chat parser (probably not for a good reason, it's just not on the whitelist). If you just want to center the two boxes, I think that this will do it: <div style="margin: 0 auto"> <div style="display:inline-block">A</div> <div style="display:inline-block">B</div> </div> However, recreating a whole table without either flex or grid or table will be hard.
1523139829

Edited 1523142308
Missingquery
Sheet Author
API Scripter
That seems to only center the wrapper div, not center the divs inside the wrapper div, unfortunately.