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

Are html tables supported via sendChat?

1619980711

Edited 1619989531
David M.
Pro
API Scripter
The title says it all. I tried sending the following simple table to chat (hardcoded text for testing), but it only printed the "Title" div (line 2 below) and seemed to ignore everything else (table, tr, td entities). Am I barking up the wrong tree? Something messed up in my syntax? Are only divs and spans supported? let testHTML = `&lt;div style="min-height:5px; width:100%; "&gt;` + `&lt;div style="position: absolute; top:1.5%; left:1%; width: 98%; z-index: 0; font-style:normal; font-size: 1.2em; line-height: 1.6em; font-weight: bold; color: #eeeeee; border-width: 1px; border-style: solid; border-color: black; border-radius: 6px; text-align: center; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; background:#000000; background-image: linear-gradient(black, green, black);"&gt;Radar (units:u)&lt;/div&gt;`+ `&lt;table style="position: relative; padding-top: 2.3em; padding-bottom: 0.2em; left: 1%; width:98%; border: 2px solid #000000; border-radius: 6px; border-collapse: separate; line-height: 2em; background:#ffffff; z-index: -1;"&gt;` + `&lt;tr style="vertical-align: top; width:1px; white-space:nowrap; line-height: 1.6em; background:#cccccc;"&gt;` + `&lt;td style="border-radius:6px 0px 0px 0px; text-align: center"&gt;&lt;b&gt;Category&lt;/b&gt;&lt;/td&gt;` + `&lt;td style="text-align: center"&gt;1.&lt;/td&gt;` + `&lt;td style="border-radius:0px 6px 0px 0px"&gt;Left 3, Up 2 &lt;br&gt; Distance = 3.6&lt;/td&gt;` + `&lt;/tr&gt;` + `&lt;tr style="vertical-align: top; width:1px; white-space:nowrap; line-height: 1.6em; background:#eeeeee;"&gt;` + `&lt;td style="border-radius:0px 0px 0px 6px"&gt;&lt;/td&gt;` + `&lt;td style="text-align: center"&gt;2.&lt;/td&gt;` + `&lt;td style="border-radius:0px 0px 6px 0px"&gt;Left 3, Up 2 &lt;br&gt; Distance = 3.6&lt;/td&gt;` + `&lt;/tr&gt;` + `&lt;/table&gt;` + `&lt;/div&gt;` sendChat('',testHTML); The source html seems to work in jsfiddle, but I know chat has a bunch of limitations. <a href="https://jsfiddle.net/djmoorehead/8gn6d1yt/2/" rel="nofollow">https://jsfiddle.net/djmoorehead/8gn6d1yt/2/</a>
1619985157

Edited 1619989627
David M.
Pro
API Scripter
Just in case, I tried converting to all divs with styles of display: table, display: table-row, and display: table-cell, but no love. let testHTML = `&lt;div style="min-height:5px; width:100%; "&gt;` + `&lt;div style="position: absolute; top:1.5%; left:1%; width: 98%; z-index: 0; font-style:normal; font-size: 1.2em; line-height: 1.6em; font-weight: bold; color: #eeeeee; border-width: 1px; border-style: solid; border-color: black; border-radius: 6px; text-align: center; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; background:#000000; background-image: linear-gradient(black, green, black);"&gt;Radar (units:u)&lt;/div&gt;` + `&lt;div style="display: table; position: relative; padding-top: 2.3em; padding-bottom: 0.2em; left: 1%; width:98%; border: 2px solid #000000; border-radius: 6px; border-collapse: separate; line-height: 2em; background:#ffffff; z-index: -1;"&gt;` + `&lt;div style="display: table-row; vertical-align: top; width:1px; white-space:nowrap; line-height: 1.6em; background:#cccccc;"&gt;` + `&lt;div style="display: table-cell; border-radius:6px 0px 0px 0px; text-align: center"&gt;&lt;b&gt;Category&lt;/b&gt;&lt;/div&gt;` + `&lt;div style="display: table-cell; text-align: center"&gt;&lt;b&gt;1.&lt;/b&gt;&lt;/div&gt;` + `&lt;div style="display: table-cell; border-radius:0px 6px 0px 0px"&gt;Left 3, Up 2 &lt;br&gt; Distance =3.6&lt;/div&gt;` + `&lt;/div&gt;` + `&lt;div style="display: table-row; vertical-align: top; width:1px; white-space:nowrap; line-height: 1.6em; background:#eeeeee;"&gt;` + `&lt;div style="display: table-cell; border-radius:0px 0px 0px 6px"&gt;&lt;/div&gt;` + `&lt;div style="display: table-cell; text-align: center"&gt;&lt;b&gt;2.&lt;/b&gt;&lt;/div&gt;` + `&lt;div style="display: table-cell; border-radius:0px 0px 6px 0px"&gt;Left 3, Up 2 &lt;br&gt; Distance =3.6&lt;/div&gt;` + `&lt;/div&gt;` + &nbsp;&nbsp;&nbsp;&nbsp;`&lt;/div&gt;` + `&lt;/div&gt;` sendChat('',testHTML);
1619989729
timmaugh
Pro
API Scripter
I use tables just fine, so that should be working. One thing I can say immediately is that you don't need the escape characters when you're in a template literal, so your first line could become (for example): let testHTML = `&lt;div style="min-height:5px; width:100%;"&gt;` + Also, your template literals don't have to close every line, using the concatenation operator (+)... You can just do a line break and keep going. let testHTML = `&lt;div style="min-height:5px; width:100%;"&gt; &nbsp; &nbsp; &lt;div style="position: absolute; top:1.5%; left:1%; width: 98%; z-index: 0; font-style:normal; font-size: 1.2em; line-height: 1.6em; font-weight: bold; color: #eeeeee; border-width: 1px; border-style: solid; border-color: black; border-radius: 6px; text-align: center; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; background:#000000; background-image: linear-gradient(black, green, black);"&gt; &nbsp; &nbsp; &nbsp; &nbsp; Radar (units:u) &nbsp; &nbsp; &lt;/div&gt; ...etc... `; I don't have time at the moment to see if there's a flaw in the syntax, but what you're trying to do should be possible! I'll look later if you haven't figure it out yet!
1619990747

Edited 1619991668
David M.
Pro
API Scripter
Thanks, Tim. I had edited for the escaped double-quotes earlier. Was hoping that would fix but still nope. I was only 50% sure line breaks would work with template literals, so stuck them in there just in case. Thanks for confirmation. EDIT -&nbsp; &nbsp;looks like chat doesn't like the line breaks, so guess I'll keep using concatenation. I logged testHTML from my 2nd post (all divs) and tried the resulting string in jsfiddle (after unescaping the quotes) and it runs fine. Something else weird is going on. I'll keep at it!
1619995966
David M.
Pro
API Scripter
Aha! Turns out the problem was I had set the z-index to -1 for the table and 0 for the ribbon overlay. This worked in jsfiddle, but there must be another layer in chat that the table was hiding behind? Anyway, when I bump up the z-indices, everything displays! Still need to do some optimization for chat appearance, but at least I can see what I'm working with now :) Thanks for the input, Tim!
1620010883
timmaugh
Pro
API Scripter
Ha! I did the same thing with a ZeroFrame output not too long ago! Also, good to know the line breaks don't work... I'll have to dig up where I thought I had done them; find out what I actually did, instead. =D