Repeating Section Control Button z-index issue

I've noticed while working on my character sheet that I have to get very creative to get around this truly annoying bug. The Delete button for repeating section elements seems to be placed underneath the repeating section itself so if you use tables or spans or have any form of input element on top of the button you cannot click the button itself. I spent the better part of the night trying to figure out what what was going on and then to come up with a workaround to this annoyance. As you can see in the picture the z-index of the delete box places it under the section contents. Using the style ".repcontrol_del" in the base.css file (I think), could do with a z-index that places it ON TOP of everything else. Because this element is normally hidden and is only visible when you click on the Modify Button. This should be a fix, then again if you are hiding it by dropping the z-index to a negative value, then maybe not a quick fix. Either way, this is really annoying, but I suppose not game breaking.

Toby said: Using the style ".repcontrol_del" in the base.css file (I think), could do with a z-index that places it ON TOP of everything else. Because this element is normally hidden and is only visible when you click on the Modify Button. This should be a fix, then again if you are hiding it by dropping the z-index to a negative value, then maybe not a quick fix. For what it's worth, you can include CSS in your character sheet to modify the repeating section buttons. If the delete button is getting hidden underneath other elements on your sheet, you can modify the z-index or move the button.

I tried modifying the code for the button it didn't work, I assumed it was because the ccs we use always prepends the "sheet-" to it.

No, the system prepends "sheet-" to any classes which appear in the HTML class attribute. The system prepends ".charsheet " to CSS selectors, to prevent you from modifying the appearance of the rest of the VTT. If you've tried styling the delete button, at a guess you're running into specificity: the more specific selector is beating the less specific selector when the browser decides what to use. Increasing your selector's specificity, or using !important on the properties of the selector can make your CSS "win" over the default. I haven't tried changing the CSS of the delete button specifically, but I have done some manipulation in repeating sections in my sheets. Here's some CSS from the Exalted 2e sheet: [data-groupname=repeating_attack] div:not(:first-child) .sheet-attack { border-top: 1px solid #ccc; } .repcontainer[data-groupname=repeating_attacks] .repitem:last-child .sheet-rolls { border-bottom: 3px solid #000; } [data-groupname=repeating_intimacies] .repitem { display: inline-block; } [data-groupname=repeating_intimacies] .repitem:nth-child(even) { margin-left: 40px; } .sheet-weapons .repcontrol { width: 400px; } [data-groupname=repeating_charms] .repitem { width: 100%; } .repcontrol, .sheet-familiar-attacks > tbody > tr:not(:first-child) > td > input { margin-top: 5px; } And here's some CSS from the DFRPG sheet: .repcontainer[data-groupname=repeating_superb] .repitem, .repcontainer[data-groupname=repeating_great] .repitem, .repcontainer[data-groupname=repeating_good] .repitem, .repcontainer[data-groupname=repeating_fair] .repitem, .repcontainer[data-groupname=repeating_average] .repitem, .repcontainer[data-groupname=repeating_locations] .repitem, .repcontainer[data-groupname=repeating_faces] .repitem { display: inline-block; } .repcontainer[data-groupname=repeating_superb] .repitem input[type=text], .repcontainer[data-groupname=repeating_great] .repitem input[type=text], .repcontainer[data-groupname=repeating_good] .repitem input[type=text], .repcontainer[data-groupname=repeating_fair] .repitem input[type=text], .repcontainer[data-groupname=repeating_average] .repitem input[type=text] { margin-bottom: 5px; } .repcontainer[data-groupname=repeating_superb] .repitem:last-child .sheet-skill-delimiter, .repcontainer[data-groupname=repeating_great] .repitem:last-child .sheet-skill-delimiter, .repcontainer[data-groupname=repeating_good] .repitem:last-child .sheet-skill-delimiter, .repcontainer[data-groupname=repeating_fair] .repitem:last-child .sheet-skill-delimiter, .repcontainer[data-groupname=repeating_average] .repitem:last-child .sheet-skill-delimiter { opacity: 0; } .repcontainer[data-groupname=repeating_superb] .repitem:not(first-child) .sheet-skill-delimiter, .repcontainer[data-groupname=repeating_great] .repitem:not(first-child) .sheet-skill-delimiter, .repcontainer[data-groupname=repeating_good] .repitem:not(first-child) .sheet-skill-delimiter, .repcontainer[data-groupname=repeating_fair] .repitem:not(first-child) .sheet-skill-delimiter, .repcontainer[data-groupname=repeating_average] .repitem:not(first-child) .sheet-skill-delimiter { margin-right: 5px; } .repcontainer[data-groupname=repeating_powers] .repitem { margin-bottom: 5px; } .repcontrol { margin-bottom: 5px; } .repcontainer.editmode[data-groupname=repeating_powers] + .repcontrol { text-align: right; } .repcontainer.editmode[data-groupname=repeating_powers] + .repcontrol .repcontrol_edit { float: none; } .repcontainer.editmode[data-groupname=repeating_locations] .repitem .sheet-section, .repcontainer.editmode[data-groupname=repeating_faces] .repitem .sheet-section { z-index: -1; } .repcontainer[data-groupname=repeating_locations] .repitem, .repcontainer[data-groupname=repeating_faces] .repitem { width: calc(33% - 7px) !important; margin-right: 10px !important; } .repcontainer[data-groupname=repeating_locations] .repitem:nth-child(3n), .repcontainer[data-groupname=repeating_faces] .repitem:nth-child(3n) { margin-right: 0 !important; } Here's some additional info on styling repeating sections .

I like to use the inspect element feature of the browser(chrome) when trying out different css styles. Just right-click an element on the webpage and choose inspect element, then you can find the relevant css in the console window(Style tab) and toggle, add, adjust to see the result in real-time. Once I find the desired effect, copy/paste to my css file and save it. Cheers

Vince said: I like to use the inspect element feature of the browser(chrome) when trying out different css styles. Just right-click an element on the webpage and choose inspect element, then you can find the relevant css in the console window(Style tab) and toggle, add, adjust to see the result in real-time. Once I find the desired effect, copy/paste to my css file and save it. Cheers The developer tools will also tell you exactly what selectors are being matched against the element you have selected, and will cross out any properties that are being overridden in another selector.

I've still not been able to change the css of the delete button. But, the inspect element has been enormous help, Even managed to find why I couldn't change the alignment of a large amount of text. Wooohoo! Thank you for the help.

I just checked real quick on a sheet and found the relevant class, although I could affect the position of the trash can in the inspector, adding the class to my style sheet and including the !important did not work. .ui-dialog .charsheet .repcontainer .repitem .itemcontrol .repcontrol_del { float: left !important; z-index: 99999 !important; }

Vince said: I just checked real quick on a sheet and found the relevant class, although I could affect the position of the trash can in the inspector, adding the class to my style sheet and including the !important did not work. .ui-dialog .charsheet .repcontainer .repitem .itemcontrol .repcontrol_del { float: left !important; z-index: 99999 !important; } Starting your selector with .ui-dialog is going to fail, because the VTT will prefix that with .charsheet. Either start with .charsheet (it's not added if it's already the start of the selector) or start with .repcontainer (.charsheet will be added before it).

Brian said: Vince said: I just checked real quick on a sheet and found the relevant class, although I could affect the position of the trash can in the inspector, adding the class to my style sheet and including the !important did not work. .ui-dialog .charsheet .repcontainer .repitem .itemcontrol .repcontrol_del { float: left !important; z-index: 99999 !important; } Starting your selector with .ui-dialog is going to fail, because the VTT will prefix that with .charsheet. Either start with .charsheet (it's not added if it's already the start of the selector) or start with .repcontainer (.charsheet will be added before it). Thanks Brian. I'll have another go later tonight and report back.

Works for me. .charsheet .repcontainer .repitem .itemcontrol .repcontrol_del { float: left !important; z-index: 99999 !important; }