Need Help With Cog Wheel

Pro

Sheet Author

API Scripter

You'll probably need to post the entire html and css in pastebin.com. I copied your code into a sandbox, and it didnt look like your screenshots and there was no cog.

1651028402

Edited 1651028512

Pro

I apologize. I've never used paste bin but I took the exact code I posted and put it into a new file and new sandbox I got the same results.  Still moves with edge of the window. I did make a couple of changes to the CSS to make things easier to see. I added this to the beginning of the code I posted to make the d20 icon/button disappear so it is just a text button. You do have to type something next to Potion if you want to see the button. .charsheet button [ type = roll ] .sheet-potion-button { border : 0 ; background : none ; -webkit-box-shadow : none ; -moz-box-shadow : none ; box-shadow : none ; color : black ; font-size : 15px ; } .charsheet button [ type = roll ] .sheet-potion-button::before { content : "" ; color : black ; } The color used to be white which made it hard to see without the parchment background so I made it blue. This code can be found somewhere just above the EDIT ATTACK Cog Wheel Comment. .charsheet .sheet-checkbox-cog input:checked ~ span::before { content : '2' ; color : rgb ( 0 , 0 , 255 ); }

1651029144

Pro

Sheet Author

API Scripter

Aha, having the cog white wasnt very helpful. Here's your problem: .charsheet .sheet-checkbox-cog {     display : inline-block ;     height : 18px ;     position : absolute ;     right : 0 ;     width : 18px ;     padding-top : 2px ; } Changing position to position: relative; moves the cog back to a more reasonable place. I don't know whether absolute or relative is right for your sheet, but that gives a place to start investigating.

1651029749

Edited 1651030260

Pro

You're right. At least now, it isn't on the opposite side of the window. However, it is now on top of the button and not in line with it. I don't really care which side of the button the cog ends up but I would at least like it to be on the same line. Any ideas? EDIT: I see something called display: inline block. What does that do? I tried taking it out and switching it with display: inline-flex; but neither seemed to do anything... Perhaps, I'm investigating in the wrong place? .charsheet .sheet-checkbox-cog { display : inline-block ; height : 18px ; position : relative ; right : 0 ; width : 18px ; padding-top : 2px ; }

1651030281

Edited 1651030429

Pro

Sheet Author

API Scripter

It depends where you want it. You can use the top, left, right, and bottom properties to position it. Bear in mind I can only advise based on the part of the code you have supplied, and it might not work properly on the full sheet. But you could try this (and changing colour back to white): .charsheet .sheet-checkbox-cog {     display : inline-block ;     height : 18px ;     width : 18px ;     padding-top : 2px ;     position : relative ;     top : 18px ;     left : 250px ; } The original cog was position:absolute for a reason, but it's hard to know why that was without the original code. This might fix your issues though.

1651030383

Pro

Sheet Author

API Scripter

inline-block (and inline-flex) is for how that div relates to its neighbours, and because its the only thing contained in another div it wont do anything.

1651031008

Pro

Your last post about the original code, I understand, but all the fancy CSS I originally posted was from the Darker Dungeons 5e sheet. I've tried not to make too many changes to it cause it worked for the other Fieldsets I had in a different part of my sheet. This one thing I didn't want to be a Fieldset with the add/modify buttons so I thought I could just replace the tag with a Div. When I did, the cog wheel moved and has since been driving me crazy lol However, what you posted has made it almost perfectly in line so I'm just gonna tweak it. Thank you so much for your help. You're the best! 

1651031528

Pro

Sheet Author

API Scripter

Thanks :) If it's not going to be a fieldset, the previous solution should work fine. If you are going to change it back to a fieldset, you should test what it looks like if extra fieldset rows are added.

1651032740

Pro

Sheet Author

API Scripter

By the way, I looked again at the code, and it was appearing way over the right because of the right:0; entry, and because you had nothing else on the sheet. If you had other dives to the right of the box, it would lightly have appeared just at the right of your ex-fieldset. Every item on a page has an invisible box that is its true position on the sheet. You can see these box if you use your Browser's inspect feature. Because you had just one item on the sheet, and because of the way that sheet was set up, the invisible box stretched the fill width of the sheet. So the cog was appearing at the right side of the container's box (actually the container of the container, don't think too hard). If you had other stuff on the sheet to the right of that div, the cpg probably wouldnt have been all the way over there. Also changing it from right:0 to left: something woould have positioned it relative to the left side, so a number like that I used would have positioned it better. That said, it looks like positive:relative is better for this purpose. I just had to look closer to figure out what was happening, because it was bothering me :)

1651033180

Pro