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

Adjusting Radio Buttons to Left

So CSS wizardry has blessed me with the script template for radio buttons that fill to the left, but as a newbie I have some questions about how to adjust it. <a href="https://wiki.roll20.net/CSS_Wizardry#Fill_Radio_Buttons_to_the_Left" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Fill_Radio_Buttons_to_the_Left</a> First question is how/whether you can format each of these buttons in a grid template? I managed to achieve this by separating each one with a &lt;div&gt; but it stopped the script from working. Second question is whether you can make the values that it outputs out other than 1-5, for example how would I make it go from 4-12 or have a text value? I had some success doing changing the number output for the attribute value, but it messed up the number of buttons that were checked. sorry if this one is a little complicated or unclear, you guys have been a big help.
1605257809
GiGs
Pro
Sheet Author
API Scripter
Grid will work with any html tags - you dont have to put things inside divs (and in fact that's a common error jokily referred to as divitis). If you look at the original example I posted for you, it was positioning inputs. For the second question, it would help to see your code (not a screenshot), so we can easier tweak it to make it work, instead of writing it all from scratch.
Thanks for the suggestion- I haven't encountered divitus yet so that's something I'll start to look out for. I may go away for a bit and see if I can figure something out for myself and then come back with where I get to later on.
1605357272

Edited 1605357436
I managed to do it! After reconfiguring some stuff I managed to get the radio buttons to get in individual cells, and edit the template to give me the values I wanted. The problem I was having was that I wasn't adjusting the values in the css. Thanks for you help and encouragement! I'll post the code I used here if you want to see but like, this is mostly for posterity. HTML &lt;div class="stress"&gt; &lt;div class="stress-row"&gt; &lt;h4&gt;&lt;/h4&gt; &lt;h4 class="stress-header1"&gt;Stress&lt;/h4&gt; &lt;h4 class="stress-header"&gt;d4&lt;/h4&gt; &lt;h4 class="stress-header"&gt;d6&lt;/h4&gt; &lt;h4 class="stress-header"&gt;d8&lt;/h4&gt; &lt;h4 class="stress-header"&gt;d10&lt;/h4&gt; &lt;h4 class="stress-header"&gt;d12&lt;/h4&gt; &lt;/div&gt; &lt;div class="stress-row"&gt; &lt;button class="stress-button" type="act" name="act_afraid"&gt;&lt;/button&gt; &lt;div class="stress-menu"&gt;AFRAID&lt;/div&gt; &lt;input type="hidden" name="attr_afraid" class="dot" value="1" /&gt; &lt;button type="action" name="act_afraid_d4" class="dot"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_afraid_d6" class="dot gt-d4"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_afraid_d8" class="dot gt-d4 gt-d6"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_afraid_d10" class="dot gt-d4 gt-d6 gt-d8"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_afraid_d12" class="dot gt-d4 gt-d6 gt-d8 gt-d10"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; const afraidValues = ["d4","d6","d8","d10","d12"]; afraidValues.forEach(function(value) { on(`clicked:afraid_${value}`, function() { setAttrs({ "afraid": value }); }); }); &lt;/script&gt; CSS div.sheet-stress { background: white; width: 530px; padding: 10px; } .sheet-stress-row{ display: grid; grid-template-columns: 35px 100px 60px 60px 60px 60px 60px } h4.sheet-stress-header { background: #0f4136; color: white; font-weight: bold; text-align: center; } h4.sheet-stress-header1 { background: #0f4136; color: white; font-weight: bold; padding-left: 5px; } div.sheet-stress-menu { background: #e6e6e6; padding-left: 10px; padding-right: 5px; } .sheet-stress-button { width: 20px; height: 20px; padding: 2px; margin-right: 5px; } /* Configure the button styling. This example makes it look like a radio. */ button.sheet-dot { padding: 0; border: solid 1px #a8a8a8; cursor: pointer; width: 14px; height: 14px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-left: 23px; } button.sheet-dot &gt; span { width: 6px; height: 6px; border-radius: 50%; background: buttontext; } /* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */ input.sheet-dot[value="d4"] ~ button.sheet-gt-d4 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="d6"] ~ button.sheet-gt-d6 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="d8"] ~ button.sheet-gt-d8 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="d10"] ~ button.sheet-gt-d10 &gt; span.sheet-checked { display: none; }
1605358554
GiGs
Pro
Sheet Author
API Scripter
Congratulations :)