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

[Looking for Help][CSS] Trying to get linked radio buttons to function inside a repeating section

Heya, thanks all in advance for the help with this. I am trying to get a set of linked radio buttons to function within a repeating section.&nbsp; I have them functioning elsewhere on the sheet but when I try to move them into a repeating section.&nbsp; Everything seems to break down.&nbsp; I have included an image and a link to a github repository to help. What the buttons should do is when you click on one of the radio buttons it will fill in all radio buttons to the left.&nbsp; This is being done by "faking" check boxes as radio (I think).&nbsp; As I am not entirely sure how the code is actually supposed to function.&nbsp; I am aware there is also a sheet workers method to accomplish this but I understand sheetworkers even less than I understand the complicated css hierarchy required to do this. The code to this can be found on GitHub at&nbsp; <a href="https://github.com/TobyFox2002/WoD20Unified" rel="nofollow">https://github.com/TobyFox2002/WoD20Unified</a> .
1629950186

Edited 1629956698
vÍnce
Pro
Sheet Author
Looks like the repeating inputs are being set as block elements so your radio buttons are being stacked like "blocks" vertically instead of horizontally, preventing them from lining up beneath your styled "radio" spans.&nbsp; Try overriding with something like; .charsheet div.sheet-repeating-container input.sheet-hd[type="radio"] { display: inline-flex; } to hide the reset X in repeating, update with bolded .charsheet input.sheet-hd.sheet-zero:checked + span::before, .charsheet div.sheet-repeating-container input.sheet-hd.sheet-zero:checked + span::before { opacity: 0; } Still looking at the other toggle...
1629959441

Edited 1629962710
vÍnce
Pro
Sheet Author
If you want to toggle the extra radio buttons inside the repeating section, You can place a copy of your hidden toggle just above the repeating-container &lt;input type="checkbox" name="attr_show-10d-skills" value="1" class="610-skills noshow" /&gt; &lt;div class="repeating-container"&gt; &lt;fieldset class="repeating_abilities repstyle-abilites"&gt; ... stuff you want to target ... &lt;/fieldset&gt; &lt;/div&gt; then add a line to your existing css that selects those elements within the repeating section. See bolded. /* Hides Fake Checkbox above 5dots if option not selected. */ .sheet-610-attr:not(:checked) ~ input.sheet-show-10d-attr.sheet-hd[type="radio"] + span::before, .sheet-610-bgs:not(:checked) ~ input.sheet-show-10d-bgs.sheet-hd[type="radio"] + span::before, .sheet-610-skills:not(:checked) ~ input.sheet-show-10d-skills.sheet-hd[type="radio"] + span::before, .sheet-610-skills:not(:checked) ~ div.sheet-repeating-container input.sheet-show-10d-skills.sheet-hd[type="radio"] + span::before { display: none; } (btw: you could/should do this whenever you are toggling various sections sheet-wide. ie move hidden checkboxes to an outer most wrapper element then just use css to have it select the various sub-elements you want to toggle.&nbsp; One checkbox to rule them all.&nbsp; lol) Hope this helps. Cheers
Thank you very much for the help on this, and also thank you again in advance of the inevitable other questions I'm going to have on this project. Feel free to send me a message with thoughts and suggestions as well.