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

Action button in a repeating section [Bug ?]

1629716991

Edited 1629717062
Hello, I'm currently working on a character sheet, and got a pretty weird bug. I'm using action buttons inside repeating sections, and noticed one of them was not working. I debugged it as much as I could, eliminated documented bugs (like the use of an underscore inside the action button name), etc... - And noticed that just moving my button closer to the top of the DOM inside the section just made it magically work. This is fine for the first button, as it can be placed closer to the top, but the second one has to be lower on the DOM, and therefore does not work for a reason I cannot even comprehend. I have to note that my sheetworker registers the event if I put this button closer to the top of the DOM, but not if I let it sit right here. Any idea on what's causing this ? I really tried ruling every single documented bug out of the question, and yet it still refuses to work if it's nested too deep inside HTML nodes in my repeating section :/ The button's HTML : (EDIT : It doesn't look like it, but yes, the equal (=) signs are here, they're just, for some reason, rendering black-on-black when the post renders) < div class = "weapon-image" > < button type = "action" name = "act_resetwimg" class = "noneditable" > * </ button > </ div >
1629719646
GiGs
Pro
Sheet Author
API Scripter
If it works when moved around inside the repeating section, the problem isn't the button, but something about the HTML or more likely CSS somewhere in that section. I have a dim recollection of Scott mentioning there was a weird issue with action buttons and CSS using the position:absolute property, but I don't remember the details. There could be other issues. I'd suggest moving the section up incrementally, till you find the line in HTML that is causing it to stop working. You can use the divide by halves method of error checking: Move the button up halfway through the code. Test. If it it still works, move down half way through the distance you move it. If it stops working, again up half way, and so on. But if the repeating section isn't big, you can probably do it line by line. At the point it starts working, you know the line you just stepped past is the one that is causing it to break. When you find the element that is causing it to break, post it here - both the HTML and the css applying to that element.
1629725513
Oosh
Sheet Author
API Scripter
I recently ran into the bug that GiGs mentioned: setting position:static on the <button> element fixed it.
Okay, so apparently, the div I just posted (the "weapon-image" one) *is* the cause of the bug, somehow. Putting the button outside of it made it work. I tried the "position: static;" already (and hoped for the best), but alas it didn't work :( Here is the CSS of that wrapper : (Important note : another CSS rule adds a "background-image" property based off a hidden input on the top of the DOM, but since there are quite a few of them, I'm ignoring most of them and only including one as a sample) : .weapon-image { width : 350px ; height : 120px ; margin : 4px auto ; background-position : center ; background-repeat : no-repeat ; background-size : contain ; filter : contrast ( 0.5 ) sepia ( 1 ) hue-rotate ( 250deg ) brightness ( 1.5 ) contrast ( 1.5 ) saturate ( 3 ) drop-shadow ( 0px 0px 3px #EA00D9 ); } input [ type = "hidden" ][ name = "attr_wimage" ][ value = "knife" ] ~ .weapon .weapon-image { background-image : url ( "<a href="https://raw.githubusercontent.com/FalconPilot/roll20-sheets/master/sheets/starclock-v2/gui/knife.png" rel="nofollow">https://raw.githubusercontent.com/FalconPilot/roll20-sheets/master/sheets/starclock-v2/gui/knife.png</a>" ); }
1629736717

Edited 1629738025
Okay, so I cannot believe it, but I finally figured out what the problem was. Apparently, if you use a `filter` property on the container, the button isn't listened anymore ! (Or the event isn't fired, I'm not sure of what's happening behind the scenes, I couldn't find any evidence to lead me on something). Regardless, this appears to be the issue, since as soon as a just disabled the filter property in Chrome's devtools, the button event fired. Weird, I wonder what would possibly be the cause of this ? I'm using tons of filters and this is a first for me, it never happened with other kinds of inputs before o: