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

Custom character sheet works in sandbox but not live side. Datalists!

I have developed a simple sheet four use by my group using the custom sandbox. The sheet uses datalists (and thereinles the issue) Testing the sheet in the sandbox using both Firefox and Chrome it works perfectly. the issue arrises when i then go to the live side and create a new game. after cutting and pasting the code for the CSS and HTML file in to the custom sheet option in settings, and launchin gthe game the sheet works perfectly in firefox. In chrome however the datalists do not load correctly and the data from said lists appears at the bottom of the character sheet. Why is there this discrepecny between how the sandbox works and the live side?
1741775904
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Hmm, haven't heard of that issue with datalists before, but I'd be willing to bet that this is an issue with an improperly set "legacy sanitization" checkbox in the custom sheet interface. Additionally, I want to note that datalists do have known issues between Firefox and Chrome caused by the fact that none of the major browser architectures can agree on how datalists information should be rendered. This makes them very difficult, if not impossible, to fully utilize.
1741780509

Edited 1741784709
Thanks Scott. I had tried legacy = true and false in the json file to no effect however unchecking the Legacy Sanitization  setting has made it work.
1741783273
GiGs
Pro
Sheet Author
API Scripter
Can you post your datalist code? This isn't related to your question, but Ive never used datallists on roll20 and I'm not sure how you do that.
1741784564

Edited 1741784597
GiGs said: Can you post your datalist code? This isn't related to your question, but Ive never used datallists on roll20 and I'm not sure how you do that. in the HTML file the code for the field to hold the data <span><input type=text name="attr_damageType" list="damageList" placeholder="-- Select --"   style="width:5em;" /></span> then at the end of your HTML file place the actual datalist <datalist id="damageList"> <option value='cr'>cr</option> <option value='cut'>cut</option> <option value='imp'>imp</option> <option value='burn'>burn</option> <option value='cor'>cor</option> <option value='fat'>fat</option> <option value='pi-'>pi-</option> <option value='pi'>pi</option> <option value='pi+'>pi+</option> <option value='pi++'>pi++</option> <option value='tox'>tox</option> </datalist> However, Firefox and Chrome display the lists differently. Both allow you to start typing, then select from the offered choices. you can type in something not on the list, or display the list of options using the dropdown in chrome or the down arrow in firefox (this is where the display differences occur)
1741790119

Edited 1741790163
vÍnce
Pro
Sheet Author
Not sure if it matters, but are your datalists hidden?  I place these lists within a hidden section (ie display: none;) usually at the end of the HTML.
1741807021

Edited 1741807138
GiGs
Pro
Sheet Author
API Scripter
I think datalists are automatically hidden. Thank you martin, I'll test that soon. I'm guessing that barebones, with no styling, this <span><input type=text name="attr_damageType" list="damageList" placeholder="-- Select --"   style="width:5em;" /></span> would be <input type=text name="attr_damageType" list="damageList" > The placeholder is a good idea.
vÍnce said: Not sure if it matters, but are your datalists hidden?  I place these lists within a hidden section (ie display: none;) usually at the end of the HTML. I don't put the datalists in a hidded section. If working correctly they dont show up. and If you can see the list you know there is a problem somewhere, just my preference. <input type=text name="attr_damageType" list="damageList" > The placeholder is a good idea. You are correct about the bare code. I like to use placeholder because Firefox doesn't give you any indication that you are in a datalist field, it just looks like a normal text field (until you start stying something that is in the list, then a filtered popup appears). Chrome at lease gives you a dropdown arrow to give you a hint.
1742052424
StéphaneD
Pro
Sheet Author
API Scripter
GiGs You can also load datalists as you would with select elements&nbsp; See my charsheet @&nbsp; <a href="https://github.com/stephaned68/COF2e/blob/main/cof2e.html" rel="nofollow">https://github.com/stephaned68/COF2e/blob/main/cof2e.html</a> Lines 118-119 are the html part Lines 8099-8113 is the function called by a sheet-worker to load the datalist based on the value of another attribute
1742082774
GiGs
Pro
Sheet Author
API Scripter
Thanks, I'll look. I was struck by the similarity to selects. After this thread, i realised I had written about datalists before and had forgotten! For example: <a href="https://cybersphere.me/choosing-from-a-list-select-datalist/" rel="nofollow">https://cybersphere.me/choosing-from-a-list-select-datalist/</a>
1742108195
StéphaneD
Pro
Sheet Author
API Scripter
GiGs Regarding the optgroups in selects, in my experience they are also removed from selects even on published sheets. I usually work around using a disabled option element with a special CSS class for styling, and prefix the text with a nbsp entity for better visual
1742121516
GiGs
Pro
Sheet Author
API Scripter
Interesting. I've never used optgroups because of the flakiness, but that sounds like a good workaround.