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

Delete buttons for repeating rows floating and overlapping

1569307519
Chad
Plus
Sheet Author
Anyone ever experienced an issue where the delete (and move) buttons on all items in a repeating section float and overlap? I’m using code that I was using in a previous sheet and it worked fine, so I assume it may be a mistake in my CSS, maybe? I’ve used the inspector in Chrome and found no differences, so maybe it is some other weird inheritance I’m missing?
1569310482
Chad
Plus
Sheet Author
On further inspection, I found that this div: <div class="repcontainer ui-sortable editmode" data-groupname="repeating_npclist"> has a height of 0.... but I can't figure out why. That seems the cause of the whole issue. Any ideas? I didn't mess with any of those classes.
1569337415
Andreas J.
Forum Champion
Sheet Author
Translator
I think anyone who might be able to help you would need more context and concrete code examples to say much anything. What character sheet sis you use originally, and do you have a link to your version of the sheet? And did you view your sheet inside the game itself, or only the preview window for custom sheets? It's never 100% accurate, and should only be seen as an approximate representation of how the sheet looks like. Some sheets use a bit of advanced sheetworkers(javascript) to adjust some visuals of a sheet and might rely on attribute values from a sheet, neither of which can be accessed in the preview window. One example could be that each character sheet gets created with a hidden attribute named "sheetpage" , and it's numerical value might control which of the character sheet's pages it is showing, in the case of sheet's with multiple pages. From the little I have to go with, I can tell you that some sheets have used the  "height=0" -trick to temporally hide sections, or to toggle between having a section in "view" or "edit"-mode. If you search the CSS you are likely finding the same section being changed of some other condition is met, such as a related checkbox being checked.
1569343260
Chad
Plus
Sheet Author
Thanks. I was just hoping some other author had run into the issue before. It would save me a ton of code checking. I wrote the sheet and the CSS from scratch, I imagine one of the styles I have has somehow messed up the sizing of the repeating element control group. I already checked for any of the obvious, like changes to div, and I didn't do anything silly like that. Everything I have is my own classes. I'll start thru the code. I have another sheet I wrote where everything works perfectly with identical code so use of the Chrome inspector should help me find the exact cause.
1569345561
Jakob
Sheet Author
API Scripter
If your repcontainer has a height of 0, then that's because somehow all contained .repitem divs have a height of 0. What's the content of a repeating row and what are the display properties on the items within. One guess would be that you're doing something like making the repitems inline, that won't work well. But since you're not messing with these classes, properly not. Another guess: are you positioning everything within a repeating row absolutely? If so, they would not contribute to the dimensions of their parent .repitem divs.
1569354019
Chad
Plus
Sheet Author
Found the cause. Not sure how it had an impact, but I had some changes to the box-sizing property of multiple html elements and it seems like it caused most of the issue. Once I changed those to only impact my classes, the problem cleared up. Jakob said: If your repcontainer has a height of 0, then that's because somehow all contained .repitem divs have a height of 0. What's the content of a repeating row and what are the display properties on the items within. One guess would be that you're doing something like making the repitems inline, that won't work well. But since you're not messing with these classes, properly not. Another guess: are you positioning everything within a repeating row absolutely? If so, they would not contribute to the dimensions of their parent .repitem divs.