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

Rotating radio button and flex box

How do I get the width of a rotating radio button to work inside of a flex box?  Is there a way to use grids to do this?   So I have a rotating radio button (which used to be on the wiki but I can't find it).  It looks like in html: <div class="sheet-Shield">     <input type='radio' class="sheet-Shield sheet-nShield" name="attr_runeshot-Accuracy" value="1" />     <input type='radio' class="sheet-Shield sheet-yShield" name="attr_runeshot-Accuracy" value="0" checked /> <span class="sheet-Shield sheet-nShield">Accuracy</span> <span class="sheet-Shield sheet-yShield strike">Accuracy</span> </div> And in the css: div.sheet-Shield { position: relative; width: 100%; height: 20px; left:0px; top:0px; margin:0px; } input.sheet-Shield { width: 100%; height: 20px; position: absolute; left:0px; top:0px; z-index: 1; opacity: 0; } span.sheet-Shield { margin: 10px 0 0 40px; display: none; position: absolute; left:-40px; top:-10px; width:50px; text-align:center; font-weight:bold; font-variant: small-caps; } span.sheet-Shield.sheet-red { color:red; } span.sheet-Shield.sheet-strike { text-decoration: line-through; } input.sheet-nShield { z-index: 2; } input.sheet-nShield:checked + input.sheet-yShield, input.sheet-yShield:checked + input.sheet-nShield { z-index: 3; } input.sheet-nShield:checked ~ span.sheet-nShield, input.sheet-yShield:checked ~ span.sheet-yShield { display: inline-block; } I want the rotating buttons to stretch out like a flex box with a row wrap, hop to the next line when they run out of space, and not have to hard code in some kind of individual width for each item.  
By "rotating", do you mean the user is presented with one button and, when clicked, it cycles through the different options in a sequence? When you say you want them stretched like a flex box with a row map, do you mean you want to have multiple, separate rotating buttons for different options? I consider using buttons and sheetworker scripts easier for styling custom "checkboxes" and "radios". Would you be open to that option, or do you want a pure HTML+CSS approach?
Yes. Yes. And I am open to any option.
1593961867
Finderski
Pro
Sheet Author
Compendium Curator
A pure HTML+CSS options would be to put each checkbox or radio button in it's own DIV, each DIV would be a child of the Flexbox Container. Essentially putting each button in its own box...
If I understand your goals correctly, you only need two options in your rotating button, and you're open to including sheetworker scripts, then consider doing something like this: <a href="https://wiki.roll20.net/CSS_Wizardry#Alternative_Checkboxes" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Alternative_Checkboxes</a> If you need more than two options for your rotating button, you can cycle through an array of values: on("clicked:direction_toggle", function() { // Check the current value of the hidden attribute. getAttrs(["direction"], function(v) { var directionCycle = ["left", "up", "right", "down"]; var directionIndex = directionCycle.indexOf(v["direction"]); setAttrs({ "direction": directionCycle[(directionIndex + 1) % directionCycle.length] }); }); }); This cycles through the values "left", "up", "right", and "down". The "% directionCycle.length" makes it reset to the beginning after it reaches the end of the cycle. If you just need the attribute set to numeric values starting from 0, you can do it without an array: on("clicked:direction_toggle", function() { &nbsp; // Check the current value of the hidden attribute. &nbsp; getAttrs(["direction"], function(v) { &nbsp; &nbsp; var directionNumber = parseInt(v["direction"], 10); &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; "direction": (directionNumber + 1) % 4 &nbsp; &nbsp; }); &nbsp; }); });