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

Genesys/SWRPG - Custom Sheet Help

I've got a sheet heavily modified from the SWRPG FFG / Genesys system. I'm pretty happy with what I've got so far, but a few issues I can't explain are happening. Excuse me as well if I am missing some lingo, this is my first time tinkering around with HTML/CSS/JSON.

I've got a few issues I'm trying to resolve and I'm hoping someone could help me out.

Issue 1

As seen below, the boxes such as wounds, strain, defense, enc., etc. The input fields won't stay anchored within the designated area. For whatever reason they are all over the place. How do I fix this?


Issue 2

This little area that as the three radio buttons (base / business / home) they are somehow off centered, how do i get these centered between the two lines?


Issue 3

This one's really weird, so whenever I mouse over the areas in dark gray, they turn to white, then return back to normal as shown. How do I keep this from happening?


Issue 4

Another instance of floating input fields/boxes, this time some of the top text as well (in white)


If I need to send the code to someone I'm more than happy to, this is a big learning curve for me. I appreciate any help and advice I can get.

Thanks!

January 05 (1 month ago)

Edited January 05 (1 month ago)
vÍnce
Pro
Sheet Author

Hi Galaxy Master,

Hard to tell without seeing the code...

1. Did these areas work previously?  If the unmodified sheet looks OK, you might try comparing those areas to yours. Can you see any differences in how those elements are being styled?  Perhaps you've added some css that is overriding something? The browser's developer tools (ie inspect element) are a great way to see what is actually being applied from the css.

2. The majority of those issues look like problems with the display type and/or the positioning (likely absolute or relative) of elements.  There is also a parent and child(ren) element relationship that needs to be considered as well.  You might find the parent element (the one that wraps inputs) and add position: relative and see if that changes the inputs position.  You can also try position: relative on the parent and the input then adjust the inputs granularly with margin and/or top, left, right, bottom etc.

3. Search for ":hover" in your css may help figure out what might be causing the background to change when you hover over that area. There may be something that is supposed to visually indicate your cursor is within a given section. Not sure.  Are there any other areas that change when you mouse-over the section?  Does this behavior change in/out of darkmode?


I was able to fix all of the above with clicking on the legacy sanitization option, that solved the issue. Thanks for the help, Vince, I appreciate it.

January 05 (1 month ago)
vÍnce
Pro
Sheet Author

Galaxy Master said:

I was able to fix all of the above with clicking on the legacy sanitization option, that solved the issue. Thanks for the help, Vince, I appreciate it.

There you go. The best solutions are often the simplest ones. ;-)