Checkbox values not updating

Here's a screenshot of how it worked previously, with the black text being default (untaken abilities) and the purple ones taken. I'm using a Custom sheet, and have checked similar custom sheets for other games I'm in. Radio values seem to work fine, but the Checkbox values are not updating consistently, and often not at all. These sheets previously worked as intended (the screenshot is from a sheet that hasn't been updated for several months). For what it's worth, I also checked the Scum and Villainy and Blades in the Dark sheets that pop up on the Roll20 template list, and those seem to work as intended. I first noticed this issue last Wednesday night (June 27th, ~6 PM Pacific), though there were also some server issues at the time. EDIT: Of course this happens as soon as I post this, but I was able to tab into the checkbox values and alter them that way. This is still a bug, because clicking the values doesn't seem to work, but at least there's a workaround.&nbsp; Reproduction Open a custom Character sheet Click on a checkbox&nbsp; It doesn't change Tab Workaround Reproduction: Open a custom Character sheet Highlight/enter a value into an adjacent input field Tab or shift-tab to select the checkbox that you want marked Press Space to mark it Setup: Chrome 67.0.3396.99 (also tried with Firefox&nbsp;60.0.2) Browser Addons/Extensions: Everything's disabled on Roll20 except for 1Password, on Chrome. Nothing on Firefox.&nbsp; OS: Windows 10 Home Additional Info: One of my players was somehow able to mark off one of his abilities (checkbox values), but after trying again, could neither mark off the others nor toggle off the one he had marked. Oh, and here's all the campaigns that I looked at to try to narrow down the issue: Works: &nbsp; <a href="https://app.roll20.net/campaigns/details/2475727" rel="nofollow">https://app.roll20.net/campaigns/details/2475727</a> &nbsp;(Blades in the Dark template sheet) <a href="https://app.roll20.net/campaigns/details/3220564" rel="nofollow">https://app.roll20.net/campaigns/details/3220564</a> &nbsp;(Scum and Villainy template sheet) Doesn't Work: <a href="https://app.roll20.net/campaigns/details/2406963" rel="nofollow">https://app.roll20.net/campaigns/details/2406963</a> &nbsp;(Custom Sheet) <a href="https://app.roll20.net/campaigns/details/3388637" rel="nofollow">https://app.roll20.net/campaigns/details/3388637</a> &nbsp;(Custom Sheet)

The fact that it doesn't work for your custom sheet probably means there's something off with your code. The Blades sheet — which I presume that this is based upon, judging by the looks — actually uses a checkbox + span combo, where an invisible checkbox sits on top of the span. It's likely that your checkbox was displaced somehow, perhaps via the recent roll20 css changes. I would advise you to inspect the relevant section of the sheet with the browser's dev tools and figure where the checkbox actually is, and if it correctly has a z-index higher than the span following it.

Thanks, Jakob! I've identified where the problem lies, but changing the z-index doesn't seem to effect the displaced checkbox. I turned off the opacity to help find where the checkbox actually is, I can't seem to figure out how to overlay it onto the ability marker.

Yeah, z-index is not the problem. I don't know how you are arranging the elements in a special ability row here. This seems to be based on a pretty old version of the Blades sheet, so I don't know what exactly the techniques used are. Any particular reason that you have the ability name &amp; checkbox at the bottom instead of at the top? You could perhaps show the relevant code sections. Are these elements in a flex row, or is it all inline-blocks? I presume that the checkbox has position:absolute.

Yeah, it's pretty old, from before Blades officially released last year. None of my group is good at editing HTML, so I've just been slowly tinkering with it to try to fit in the mechanics for the various Blades hacks we've been playing through. I don't have a preference to the ability name and checkbox being at the bottom, top, or center, it's just how things have shaken out.&nbsp; I do appreciate your help. Here's the HTML : &lt;div class="sheet-col100"&gt;&lt;div class="sheet-specialheader"&gt;Special Abilities&lt;/div&gt;&lt;div class="sheet-abilitiesholder"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-specialability"&gt;&lt;div class="sheet-abilitycheck"&gt; &lt;input type="checkbox" value="None" name="attr_ability1" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="text" value="Ability Name" class="sheet-abilityname1" name="attr_ability_name2" /&gt;&lt;textarea class="sheet-ability1desc" name="attr_ability_info1"&gt;Ability description&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt; &lt;fieldset class="repeating_abilities"&gt;&nbsp; &lt;div class="sheet-specialability"&gt;&lt;div class="sheet-abilitycheck"&gt; &lt;input type="checkbox" value="None" name="attr_ability2" /&gt;&lt;span&gt;&lt;/span&gt; &nbsp; &nbsp; &lt;input type="text" value="Ability Name" class="sheet-abilityname1" name="attr_ability_name2" /&gt;&lt;textarea class="sheet-ability1desc" name="attr_ability_info1"&gt;Ability description&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;/fieldset&gt;&lt;/div&gt;&lt;/div&gt; And here's the CSS : .sheet-specialability{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 2px; &nbsp; &nbsp; padding-left: 4px; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom: 1px solid #b3b4b6; } .sheet-abilitiesholder{ &nbsp; &nbsp; width:100%; &nbsp; &nbsp; background-color:#d6d8d9; &nbsp; &nbsp; box-sizing:border-box; } .sheet-specialability input[type=text]{ &nbsp; &nbsp; &nbsp; &nbsp; border-bottom: none; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; width: 25%; &nbsp; &nbsp; font-family: "Hoefler Text","Baskerville Old Face",Garamond,"Times New Roman",serif; &nbsp; &nbsp; color: black; &nbsp; &nbsp; &nbsp; &nbsp;font-variant: small-caps; &nbsp; &nbsp; font-size: 100%; &nbsp; &nbsp; font-weight: 800; &nbsp; &nbsp; letter-spacing: 0px; &nbsp; &nbsp; padding-left: 5px; &nbsp; &nbsp; padding-top:4px; } .sheet-specialability textarea{ &nbsp; &nbsp; width: 69%; &nbsp; &nbsp; resize: vertical; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; height: 50px; &nbsp; &nbsp; box-shadow: none; &nbsp; &nbsp; color: black; &nbsp; &nbsp; font-size: 95%; &nbsp; &nbsp; border: none; &nbsp; &nbsp; line-height: 122%; &nbsp; &nbsp; background-color: rgb(214, 216, 217); &nbsp; &nbsp; font-family: Georgia,Times,"Times New Roman",serif; } /* SPECIAL ABILITY TICKBOXES */ .sheet-abilitycheck input[type="checkbox"],input.sheet-itemcheckbox, .sheet-attributedot input{ &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; z-index: 100; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 20px; &nbsp; &nbsp; height: 20px; } .sheet-abilitycheck { &nbsp; &nbsp;display:inline-block; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp;&nbsp; } .sheet-abilitycheck input[type="checkbox"] + span::before,input.sheet-itemcheckbox + span::before, .sheet-attributedot input + span::before{ &nbsp; &nbsp; content: ''; cursor: pointer; &nbsp; &nbsp; top: 0px; &nbsp; &nbsp; width: 10px; &nbsp; &nbsp; height: 10px; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; margin: 0px 0px 0px 2px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; padding: 0; &nbsp; &nbsp; background-color: none; &nbsp; &nbsp; border: 1px solid #c46bef; &nbsp; &nbsp; border-radius: 30px; } .sheet-abilitycheck input[type="checkbox"]:checked + span::before,input.sheet-itemcheckbox:checked + span::before,.sheet-attributedot input:checked + span::before{ content: ''; position: relative; &nbsp; &nbsp; &nbsp;top: 0px; &nbsp; &nbsp; padding:0; &nbsp; &nbsp; margin: 0px 0px 0px 2px; &nbsp; &nbsp; width: 10px; height: 10px; &nbsp; &nbsp;background-color:#c46bef; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 30px; } .sheet-attributedot input, .sheet-attributedot input + span:before { &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50px !important; &nbsp; &nbsp;background-color:#c6c7c9; &nbsp; &nbsp; border:none; &nbsp; &nbsp; &nbsp; &nbsp; } .sheet-stashbox.sheet-attributedot:last-child{ &nbsp; &nbsp; margin-right:0px !important; } input.sheet-itemcheckbox{ &nbsp; &nbsp; &nbsp; &nbsp; width: 16px !important; &nbsp; &nbsp; height: 15px !important; } input.sheet-itemcheckbox + span::before, input.sheet-itemcheckbox:checked + span::before{ &nbsp; &nbsp; top: 2px !important; &nbsp; &nbsp; border-radius: 0px !important; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #c9cdcf !important; &nbsp; &nbsp; margin-right: 1px !important; } .sheet-abilitycheck input[type="checkbox"]:hover + span::before,input.sheet-itemcheckbox:hover + span::before&nbsp; { filter: alpha(opacity=30); opacity: 0.3; } .sheet-abilitycheck input[type="checkbox"]:checked ~ input[type=text],input.sheet-itemcheckbox:checked ~ input[type=text]{ &nbsp; color:#c46bef; }

Urgh, this is really old. I feel obliged to mention that I have created a&nbsp; code base &nbsp;to create new sheets for Blades hacks out of, though it is a bit more advanced code-wise than pure HTML/CSS (there's hints, though!). Anyway, it's hard to help with an ancient beast like that, but let me try: .sheet-abilitycheck { display: flex; align-items: flex-start; } .sheet-abilitycheck textarea, .sheet-abilitycheck input[type=text], .sheet-abilitycheck input[type=checkbox], .sheet-abilitycheck span { flex: 0 0 auto; }

That works, thanks! I've been meaning to learn a bit more front end stuff, so I'll definitely take a look at your link.&nbsp;