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] CSS Conundrum: Shifting Input

1518623996
Finderski
Pro
Sheet Author
Compendium Curator
I'm trying to display an image when a checkbox is clicked. &nbsp;I've done stuff like this before, so am stumped as to why my input box keeps shifting down when it gets clicked... Using the Chrome Dev tools, I know it's the checkbox that's shifting down and the span is where it should be. Here's HTML: &lt;td class='sheet-wtd'&gt;&lt;input class='sheet-wound' type='checkbox' name='wounds1' value='1' /&gt;&lt;span class='sheet-wound'&gt;&lt;img src="<a href="http://www.geeksville.us/roll20/hand_drawn_x_small.png" rel="nofollow">http://www.geeksville.us/roll20/hand_drawn_x_small.png</a>" style="width:44px; height: 34px;"&gt;&lt;/img&gt;&lt;/span&gt;&lt;/td&gt; (I know I'm using a table, but for this small thing, I figured it'd be ok...I should have known my shame would be made public) CSS: .charsheet .sheet-wtd, .charsheet .sheet-ftd { width: 44px; height: 34px; margin: 0px; padding: 0px; border-style: solid; border-color: black; letter-spacing: normal; } .charsheet input.sheet-wound { width: 44px; height: 34px; opacity: 0; margin: 0px; padding: 0px; z-index: 999; display: inline-block; } .charsheet span.sheet-wound { display: none; width: 44px; height: 34px; margin: 0px; padding: 0px; margin-left: -44px; vertical-align: center; text-align: center; } .charsheet input.sheet-wound:checked + span.sheet-wound { display: inline-block; } .charsheet .sheet-wtd { border-width: 2px 1px 1px 1px; } So...what have I&nbsp;overlooked? It's driving me crazy... :-/
1518624404

Edited 1518624660
vÍnce
Pro
Sheet Author
Try adding vertical-align: baseline; to .charsheet input.sheet-wound { width: 44px; height: 34px; opacity: 0; margin: 0px; padding: 0px; z-index: 999; display: inline-block;&nbsp; vertical-align: baseline; }
1518625548
Finderski
Pro
Sheet Author
Compendium Curator
Thanks, Vince, while that wasn't perfect, it did set me on the right path...I had to use a combination of vertical-align: top (for the input) and vertical-align: middle (for the span). And for anyone really paying attention, I did catch that the input name was missing the attr_ (and that's been corrected). :)
1518629694
vÍnce
Pro
Sheet Author
My coding tool of choice;
1518629811
Finderski
Pro
Sheet Author
Compendium Curator
Heading to Home Depot right now...gotta get me one of them... LOL
1518630020
vÍnce
Pro
Sheet Author
or just borrow one of CPP's&nbsp; hammers
1518633564
Finderski
Pro
Sheet Author
Compendium Curator
BAHAHAHA
1519322678

Edited 1519322720
Looks like both the input and the span are inline-block elements, so when you make the span appear it pushes the input down. If you add a position: absolute property to the span, it won't push things away. Adding a z-index: -1 property to the span will prevent it from blocking the input. .charsheet .sheet-wtd, .charsheet .sheet-ftd { &nbsp;&nbsp; &nbsp;width: 44px; &nbsp;&nbsp; &nbsp;height: 34px; &nbsp;&nbsp; &nbsp;margin: 0px; &nbsp;&nbsp; &nbsp;padding: 0px; &nbsp;&nbsp; &nbsp;border-style: solid; &nbsp;&nbsp; &nbsp;border-color: black; &nbsp;&nbsp; &nbsp;letter-spacing: normal; } .charsheet input.sheet-wound { &nbsp;&nbsp; &nbsp;width: 44px; &nbsp;&nbsp; &nbsp;height: 34px; &nbsp;&nbsp; &nbsp;opacity: 0; &nbsp;&nbsp; &nbsp;margin: 0px; &nbsp;&nbsp; &nbsp;padding: 0px; &nbsp;&nbsp; &nbsp;z-index: 999; &nbsp;&nbsp; &nbsp;display: inline-block; } .charsheet span.sheet-wound { &nbsp;&nbsp; &nbsp;display: none; &nbsp;&nbsp; &nbsp;width: 44px; &nbsp;&nbsp; &nbsp;height: 34px; &nbsp;&nbsp; &nbsp;margin: 0px; &nbsp;&nbsp; &nbsp;padding: 0px; &nbsp;&nbsp; &nbsp;margin-left: -44px; &nbsp;&nbsp; &nbsp;vertical-align: center; &nbsp;&nbsp; &nbsp;text-align: center; &nbsp;&nbsp; &nbsp; z-index: -1; } .charsheet input.sheet-wound:checked + span.sheet-wound { &nbsp;&nbsp; &nbsp;display: inline-block; &nbsp;&nbsp; &nbsp; position: absolute; } .charsheet .sheet-wtd { &nbsp;&nbsp; &nbsp;border-width: 2px 1px 1px 1px; }
1519340600
vÍnce
Pro
Sheet Author
You mean you don't have to use hammer?&nbsp; ;-P In all seriousness, your example is proof that I often settle for the first apparent solution I find when trying to solve layout issues.&nbsp; I appreciate your approach and explanation. Thanks