Checkbox to hide div elements that aligns with span within div. Checkboxes alignment problems

I followed the guide here and made some checkboxes that hide/reveal a seperate div chunk.&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas</a> It works pretty good, except that from previous troubleshooting and from the guide, it seems that the checkbox needs to be outside the div element that it's changing. The problem with this is I'm having trouble anchoring it to the div element to show up where I want it. I'm trying to essentially have it overlap some blank space within a div "table". Like so.... The problem is that, if I drag out the character sheet or resize it, or even unclick the checkbox, it gets moved around to all sorts of wonky places. One such example... So I'm wondering if there's a way to either 1. Let the checkbox be hidden or something, and have a checkbox that is inside the div element that links to the real checkbox, so it's easier to place. It'd be nice to have the checkbox actually inside a span or div element that is in that grid and row element. 2. Allign things in a better way than I'm doing now, without using the above example. Currently, here's my CSS for the checkbox, and an idea how the divs are layed out. I could try to paste the code for the html and css elements and corresponding divs, but I'm afraid it might be a bit excessively long. Hoping the above screenshot shows the div layout okay. If it would help to show more code, let me know what I should include. It might be worth mentioning that the div html code for those two screenshotted skill tables are repeated. One in a separate tab. One in the main tab. It also seems like the top and bottom margins for each get screwy/change around upon resizing. That may be a separate issue, or perhaps it's related to all this, and I need to post the code for the styling and grid used for those tables and div elements surrounding the checkbox. Thanks!

Normally you need to trigger css changes from either a parent element or a sibling of the element. One way to work around this is to place "copies" of your checkbox wherever you want. They can also be hidden as well. The checkbox state will be consistent between all copies.&nbsp; For example, you could have a "Settings" page where you toggle things as needed, then sprinkle hidden copies of those checkboxes through out your sheet as needed to toggle css changes like hide/show. Another option is to use :has() selector which allows you to style a parent based off the state of a child element. <a href="https://www.smashingmagazine.com/2023/01/level-up-css-skills-has-selector/" rel="nofollow">https://www.smashingmagazine.com/2023/01/level-up-css-skills-has-selector/</a> Very handy!

Another approach might be to create a copy of the div, which is empty but is only shown whenthe other div is hidden. That way you have the checkbox, then the two divs with different classes, then one div is shown when the checkbox is selected, and the other showen when the checkbox isn't selected. By default, you can't have the checkbox isndie the div, because if that div is hidden the checkbox gets hidden with it since it is inside that div. Another approach would be to use two divs, and put an identical copy of the checkbox inside each div (same name).&nbsp; Again, the checkbox sets which div is visible, and one of the checkbox es is always visable.

Bear in mind you don't have to use a checkbox - you an use an action button, and any element can be this action button. When I want to hide part of a sheet, i often link it to a heading of another section - one that makes sense. Click the heading, and that div is hidden or made visible. That action button can be anywhere on the sheet, but you'll need a hidden input usually directly before the div you want to hide. Give that hidden input the class you base the divs visbility on, and have the action button toggle its value between 0 and 1. (applying 1-current value in the action button worker does that)

Thanks for all the suggestions. It seems, at least for my skill level, making a copy of the checkbox is the easiest thing for me to understand and try right now. I'm having trouble figuring out how exactly to do that. Elsewhere in the code I've used the .... type="hidden" text in the html. But it already has... type="checkbox" for the initial checkbox. I could add a CSS descriptor to the class of the checkbox with 'display: none' or something like that. In that case I'd need to add a different class I think, for a duplicate checkbox? But then it gets messy with all this stuff going on... /* ALTERNATE LAYOUT button and display */ .hidemathtext { font-family: 'Verdena'; font-style: italic; font-size: 9pt; position: relative; margin: 0pt; } .sheet-block-fulltable, .charsheet .sheet-hidemathcheckbox:checked ~ .sheet-block-nomathtable { display: block; } .charsheet .sheet-block-nomathtable, .charsheet .sheet-hidemathcheckbox:checked ~ .sheet-block-fulltable { display: none; } /* combat table changes */ .sheet-block-combatfulltable, .charsheet .sheet-combathidemathcheckbox:checked ~ .sheet-block-combatnomathtable { display: block; } .charsheet .sheet-block-combatnomathtable, .charsheet .sheet-combathidemathcheckbox:checked ~ .sheet-block-combatfulltable { display: none; } div.skilltablerow input.sheet-fakehidemathcheckbox { position: relative; top: 1px; width: 42px; height: 15px; } .charsheet input.sheet-hidemathcheckbox, .charsheet input.sheet-combathidemathcheckbox { position: relative; top: 22px; left: 202px; width: 42px; height: 16px; padding: 0pt; margin: 0pt; border: none; } My newbie code brain is just having a hard time wrapping my head around this. There's a lot of dependencies and correct order of things going on and stuff. I may try my hand at this method and see if I can get anywhere.

can ypu post the relevant HTML too?

Well, I tried this, but it didn't work... 1. Replaced the original checkbox class with a different class name. 2. Gave that new class name a css styler of display: none; (also trying with opacity: 0; for now) 3. Put a new duplicate checkbox in with the same name=&nbsp; as before.&nbsp; Like so... &lt;!-- combat skill table TAB duplicate --&gt; &lt;input type="checkbox" class="sheet-secretcheckbox" &lt;!-- originally sheet-combathidemathcheckbox --&gt; name="attr_combatskillshidemathcheckbox"&gt; &lt;div class="sheet-block-combatfulltable"&gt; &lt;div class="skilltable"&gt; &lt;div class="skilltablerow"&gt; &lt;span class="str1Skillsand"&gt;Combat Skills&lt;/span&gt; &lt;span&gt;&lt;input type="checkbox" class="sheet-combathidemathcheckbox" name="attr_combatskillshidemathcheckbox"&gt;&lt;/span&gt; &lt;span class="hidemathtext"&gt;Hide Math&lt;/span&gt; &lt;span&gt;&lt;/span&gt;

The other html spots look like this (going back to before I tried the above thing which didn't work), if it helps... &lt;input type="checkbox" class="sheet-hidemathcheckbox" name="attr_skillshidemathcheckbox"&gt; &lt;!-- ADVENTURING SKILLS REPEAT --&gt; &lt;div class="sheet-block-fulltable"&gt; &lt;div class="skilltable"&gt; &lt;div class="skilltablerow"&gt; &lt;!-- rest of table continues on from here --&gt; Another spot &lt;!-- smaller skill table check tab &lt;div class="sheet-block-nomathtable"&gt; --&gt; &lt;!-- OG Compact adventuring table --&gt; &lt;div class="sheet-block-nomathtable"&gt; &lt;div class="adventuringgridalttable"&gt; &lt;div class="skilltablerow"&gt; &lt;span class="str1Skillsand"&gt;Adventuring&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span class="hidemathtext"&gt;Hide Math&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="gridalttablecontainer"&gt; &lt;div class="adventuringgridalttabletitlerow"&gt; &lt;!-- table continues... Another spot... !-- SKILLS AND ABILITIES --&gt; &lt;!-- COMBAT SKILLS INITIAL TABLE --&gt; &lt;input type="checkbox" class="sheet-combathidemathcheckbox" name="attr_combatskillshidemathcheckbox"&gt; &lt;div class="sheet-block-combatfulltable"&gt; &lt;div class="skilltable"&gt; &lt;!-- COMPACT COMBAT table --&gt; &lt;div class="sheet-block-combatnomathtable"&gt; &lt;div class="adventuringgridalttable"&gt; &lt;!-- change/keep name or check CSS? --&gt; &lt;div class="skilltablerow"&gt; &lt;span class="str1Skillsand"&gt;Combat Skills&lt;/span&gt; I think you get the idea. Initially there's a div for a "fulltable" chunk. Then later a "nomathtable" variant that gets shown.

Okay, I woke up today and somehow realized what I was mucking up. Fiddled with it some more and got it to work. Something about 'display: none' overlapping concerned me, but here's what worked, for anyone else curious. I'm not the best at debugging CSS, so for some reason it didn't click at first. In short, I had to keep the class name the same for the checkbox that was outside the div, since it was triggering the .sheet-classname:checked or .sheet-classname:unchecked part of the css. Then after that, I just added a 'display: none' CSS decleration to the same class name. It works I think because this time I'm styling the checkbox directly, and the CSS that existed previously was just making one div or another visible based on the state of the checkbox.&nbsp; html (one instance, and repeated this pattern) &lt;!-- COMBAT SKILLS INITIAL TABLE --&gt; &lt;input type="checkbox" class="sheet-combathidemathcheckbox" name="attr_combatskillshidemathcheckbox"&gt; &lt;div class="sheet-block-combatfulltable"&gt; &lt;div class="skilltable"&gt; &lt;div class="skilltablerow"&gt; &lt;span class="str1Skillsand"&gt;Combat Skills&lt;/span&gt; &lt;span&gt; &lt;input type="checkbox" class="sheet-duplicatecheckbox" name="attr_combatskillshidemathcheckbox"&gt; &lt;/span&gt; &lt;span class="hidemathtext"&gt;Hide Math&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &nbsp;And later, for the alternate div, snuck the checkbox in... &lt;!-- COMPACT COMBAT table --&gt; &lt;div class=" sheet-block-combatnomathtable "&gt; &lt;div class="adventuringgridalttable"&gt; &lt;!-- change/keep name or check CSS? --&gt; &lt;div class="skilltablerow"&gt; &lt;span class="str1Skillsand"&gt;Combat Skills&lt;/span&gt; &lt;span&gt; &lt;input type="checkbox" class="sheet-duplicatecheckbox" name="attr_combatskillshidemathcheckbox"&gt; &lt;/span&gt; &lt;span class="hidemathtext"&gt;Hide Math&lt;/span&gt; &lt;span&gt;&lt;/span&gt; Then the relevant CSS... /* ALTERNATE LAYOUT button and display */ .sheet-block-fulltable, .charsheet .sheet-hidemathcheckbox:checked ~ .sheet-block-nomathtable { display: block; } .charsheet .sheet-block-nomathtable, .charsheet .sheet-hidemathcheckbox:checked ~ .sheet-block-fulltable { display: none; } /* combat table changes */ .sheet-block-combatfulltable, .charsheet .sheet-combathidemathcheckbox:checked ~ .sheet-block-combatnomathtable { display: block; } .charsheet .sheet-block-combatnomathtable, .charsheet .sheet-combathidemathcheckbox:checked ~ .sheet-block-combatfulltable { display: none; } .sheet-combathidemathcheckbox, .sheet-hidemathcheckbox { display: none; } Now the checkbox displays inside the table as originally intended. No more weird alignment issues. Thanks for the tips everyone.

Sadly this week I havent had a chance to look at the code peoperly, but i'm glad you got it sorted. One part of what you said made me raise an eyebrow quizzically though: previously I think the CSS was just making one div or another visible based on the state of the checkbox. I may be misunderstanding you, but the above is what you should be doing.

Yes that's correct. I followed the CSS Wizardry guide to set that up. I edited that sentence for grammar clarity. What I meant was that the CSS I had setup previously was just doing that, it wasn't affecting the visibility (display: none, or display: block) of the checkmark itself.&nbsp;

oh right. That makes sense, because if you make the checkmark invisible, you can't check (or uncheck) it again.