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?

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.

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.

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.

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>

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

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

GiGs

You can also load datalists as you would with select elements 

See my charsheet @ https://github.com/stephaned68/COF2e/blob/main/cof2e.html

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

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: https://cybersphere.me/choosing-from-a-list-select-datalist/

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

Interesting. I've never used optgroups because of the flakiness, but that sounds like a good workaround.