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

Missing part of a template in chat

Does anyone no why this could be happening? 
1639918561

Edited 1639919221
David M.
Pro
API Scripter
I'm putting out an open call for a CSS guru! For help with troubleshooting, this chat output is from my SmartAoE script. My suspicion is that it is due to me hardcoding my div a number of pixels for the left margin and width, and possibly interacting with screen resolution or something similar? I'm using margin-left:-42px and width: 270px, as in the first two lines below extracted from a buildTitle() function.          let output = `<div style=" margin-left:-42px ">` + `<div style="display: table; border: !{tableborder}; background-color: !{tablebgcolor}; width: 270px ; text-align: left; border-radius: !{tableborderradius}; border-collapse: separate; box-shadow: !{tableshadow}">` + `<div style="display: table-header-group; background-image: !{titlecardbackground}; border-bottom: !{titlecardbottomborder};">` + `<div style="display: table-row;">` + `<div style="display: table-cell; padding: 2px 2px; text-align: center; border-bottom: 2px solid #444444;border-top-left-radius: !{tableborderradius};border-top-right-radius: !{tableborderradius};">` + `<span style="font-family: !{titlefontface}; font-style:normal; font-size: !{titlefontsize}; line-height: !{titlefontlineheight}; font-weight: bold; color: !{titlefontcolor}; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;">${cardParameters.title}</span>` + `<br><span style="font-family: !{subtitlefontface}; font-variant: normal; font-size: !{subtitlefontsize}; font-style:normal; font-weight: bold; color: !{subtitlefontcolor}; ">${subtitle}</span>` + `</div>` + `</div>` + `</div>` Disclaimer: I know very little CSS/HTML, and basically went with brute force trial and error based on the construction from Kurt's Scriptcards code. Also, before someone comments that I haven't closed the div above, there is more added later for the damage, saving throws, and description fields :) Anyway, I'm trying to remember back to when I was coding this part months ago and what issues I had. I was trying to eke out as much width as possible in the default chat window along with getting the appropriate column spacing in the saving throw section (the part under "Damage 19 Thunder" in Asher's picture). In particular, I needed the extra width to handle long token names in the saving throw region without wrapping to multi-line immediately and I think I was having difficulty getting a satisfying result using em units or %. Do you guys think that using pixels could be the problem? EDIT - for comparison, here is what it looks like in the browser for me, and to my knowledge this is the first time this has come up for other users so far.
Thanks David really appreciate your help on this i did try the other things you mentioned on Nicks channel but sadly to no avail. Really hope we can find a solution cause your script is awesome 
My GM had the same problem using SmartAoE, but it just got back to normal the next session we tried it.
1639927058
David M.
Pro
API Scripter
Thanks, Vuk. Did it display like that for everyone, or just the GM?
1639977919

Edited 1639978636
Oosh
Sheet Author
API Scripter
David, I think it's chat avatars vs. no chat avatars. Try turning those off and see if you get the issue (or Asher, turn them on and see if you don't get the issue :) ) Your -42px is relative to the parent chat message <div>. Turning off the chat avatars shifts the chat message <div> over towards the left edge of the chat bar, so the -42 creeps over even further. I think . Haven't tested with smartAoE :) But you can see in the two screenshots that the non-template text is closer to the edge of the sidebar in Asher's screenshot than in yours - I reckon that's the issue. That or some other CSS edits which are modifying the chat message <div>s. I can't think of any way you can deal with this either, without access to the DOM.
1640007966
David M.
Pro
API Scripter
Oosh to the rescue, that did it! I was able to replicate Asher's issue after turning off chat avatars. I wasn't even aware that chat avatars were a thing haha. I'll need to make that offset variable and add another option to the script. Until then: Asher if you "enable chat avatars" from the in-game settings tab you'll be able to see the whole template. Thanks Oosh! 
Thank you all for the help that solved the issue
1640017277
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I hate those things, because you can' t test for them in the css. They have to be either on or off.