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

Help with Tabs/fieldsets

I am currently trying to make a tab system for my character sheet, and copied the tab code directly from the roll20 tab example on the css wizardry wiki page but it shows a blank screen when I click away from the first tab.  I think it may have something to do with a dropdown in one of the tabs thats not showing, but Im not sure, here is the css I think is causing problems /* By deafult, hides all archetypes*/ .charsheet .sheet-winded, .charsheet .sheet-dizzy, .charsheet .sheet-groggy, .charsheet .sheet-disoriented, .charsheet .sheet-nauseous, .charsheet .sheet-blurred_vision, .charsheet .sheet-ringing_ears, .charsheet .sheet-vertigo, .charsheet .sheet-tunnel_vision, .charsheet .sheet-flash_blindness, .charsheet .sheet-shivering, .charsheet .sheet-slurred_speech, .charsheet .sheet-weak_knees, .charsheet .sheet-cold_sweats, .charsheet .sheet-confusion {     display: none; } /* Show elements based on input value */ .charsheet .sheet-injurytoggle[value="winded"] ~ div.sheet-winded, .charsheet .sheet-injurytoggle[value="dizzy"] ~ div.sheet-dizzy, .charsheet .sheet-injurytoggle[value="groggy"] ~ div.sheet-groggy, .charsheet .sheet-injurytoggle[value="disoriented"] ~ div.sheet-disoriented, .charsheet .sheet-injurytoggle[value="nauseous"] ~ div.sheet-nauseous, .charsheet .sheet-injurytoggle[value="blurred_vision"] ~ div.sheet-blurred_vision, .charsheet .sheet-injurytoggle[value="ringing_ears"] ~ div.sheet-ringing_ears, .charsheet .sheet-injurytoggle[value="vertigo"] ~ div.sheet-vertigo, .charsheet .sheet-injurytoggle[value="tunnel_vision"] ~ div.sheet-tunnel_vision, .charsheet .sheet-injurytoggle[value="flash_blindness"] ~ div.sheet-flash_blindness, .charsheet .sheet-injurytoggle[value="shivering"] ~ div.sheet-shivering, .charsheet .sheet-injurytoggle[value="slurred_speech"] ~ div.sheet-slurred_speech, .charsheet .sheet-injurytoggle[value="weak_knees"] ~ div.sheet-weak_knees, .charsheet .sheet-injurytoggle[value="cold_sweats"] ~ div.sheet-cold_sweats, .charsheet .sheet-injurytoggle[value="confusion"] ~ div.sheet-confusion {     display: block; } /* configure the tab buttons */ .charsheet .sheet-character, .charsheet .sheet-journal, .charsheet .sheet-configuration {     display: none; } /* style the active button */ .charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {outline: 2px solid red;} .charsheet .sheet-tabstoggle[value="journal"] ~ div .sheet-button1 {outline: 2px solid red;} .charsheet .sheet-tabstoggle[value="configuration"] ~ div .sheet-button2 {outline: 2px solid red;} /* show the selected tab */ .charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character, .charsheet .sheet-tabstoggle[value="journal"] ~ div.sheet-journal, .charsheet .sheet-tabstoggle[value="configuration"] ~ div.sheet-configuration {     display: block; } As for field sets, as you can see above there is an injury's part with a dropdown.  I'm trying to have a field set where the injury's can all be shown and selected, but I'm doing a script to auto do the math for the injury's for the rolls, and they stop working when I place it in the fieldset, here is the basis of the code below with an example injury choice.  Any advice would help <h2>Injurys/status</h2> <div class="3colrow"> <div class="col"> <label class="txt" style="font-size:1.8em;text-decoration:underline;">injurys</label> <input type="hidden"  <select name="attr_injury"> <option disabled style="background:black;font-weight:bold;color:white;">     Disorienting injury</option> <option value="winded" selected>Winded</option> <option value="dizzy">Dizzy</option> <option value="groggy">Groggy</option> <option value="disoriented">Disoriented</option> <option value="nauseous">Nauseous</option> <option value="blurred_vision">Blurred Vision</option> <option value="ringing_ears">Ringing Ears</option> <option value="vertigo">Vertigo</option> <option value="tunnel_vision">Tunnel Vision</option> <option value="flash_blindness">Flash Blindness</option> <option value="shivering">Shivering</option> <option value="slurred_speech">Slurred Speech</option> <option value="weak_knees">Weak Knees</option> <option value="cold_sweats">Cold Sweat</option> <option value="confusion">Confusion</option> <option disabled style="background:black;font-weight:bold;color:white;">     Leg injury(left)</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Minor injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Major injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Life threatening injury</option> <option disabled style="background:black;font-weight:bold;color:white;">     Leg injury(right)</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Minor injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Major injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Life threatening injury</option> <option disabled style="background:black;font-weight:bold;color:white;">     Arm injury(left)</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Minor injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Major injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Life threatening injury</option> <option disabled style="background:black;font-weight:bold;color:white;">     Arm injury(right)</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Minor injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Major injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Life threatening injury</option> <option disabled style="background:black;font-weight:bold;color:white;">     Stomach injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Minor injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Major injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Life threatening injury</option> <option disabled style="background:black;font-weight:bold;color:white;">     Torso injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Minor injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Major injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Life threatening injury</option> <option disabled style="background:black;font-weight:bold;color:white;">     Head injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Minor injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Major injury</option> <option disabled style="background:#A9A9A9;font-weight:bold;color:white;">     Life threatening injury</option> </select> <div class="character">     <input type="hidden" class="sheet-injurytoggle" name="attr_injury" value="winded" />     <!-- Targeted elements must be direct siblings -->     <div class="sheet-winded"> <br /> <button type="roll" name="roll_injury" value="&{template:default} {{name=@{character_name}}} {{Injury: Winded}} {{Received from: Heavy physical exertion, being struck in the stomach, or sudden impact to the chest.}} {{Duration: [[2d10]] rounds.  Remaining time (@{winded_time})}} {{effects: Reduces Physicality checks by -2. Movement speed is halved.}}">Display injury</button>         <br /> <br /> <label class="txt" style="font-size:1.8em;text-decoration:underline;">Winded</label> <label class="txt" style="font-size:1em;">Received from: Heavy physical exertion, being struck in the stomach, or sudden impact to the chest.</label> <label class="txt" style="font-size:1em;">Duration: 2d10 rounds.  Remaining time:</label><input name="winded_time" type="number"></input> <label class="txt" style="font-size:1em;">Effects: Reduces Physicality checks by -2. Movement speed is halved.</label> <span>Injury in effect:</span>         <select name="attr_winded" class="sheet-injuryselect">             <option value="0">Not in effect</option>             <option value="1">In effect</option>         </select>     </div>
1730771532
GiGs
Pro
Sheet Author
API Scripter
Try copying the code exctly from that sheet, then modify it a bit at a time to fit your sheet.