Hi, I'm having trouble that I hope to get some help with.
I have a fieldset where the repcontrol_del button is overlapped by a textarea in an auto-expanding span. I need to get the repcontrol to appear on top to ensure it's accessible, and I'm having trouble getting that to work.
If I change it to a normal textarea, it works fine, so it's something about the span replacing the textarea that makes it overlap the repcontrol and remains selectable when the fieldset is in edit mode.
Because of my novice coding, I'm relying heavily on the CSS Wizardry article on the Roll20 wiki, and I'm stumped by this interaction. Can anyone help me out? Here is my very crude code: <fieldset class="repeating_abilities"> <div class="sheet-row sheet-pad-b-md"> <div class="sheet-col-1-20 sheet-center sheet-textbutton-c sheet-pad-t-md sheet-pad-r-md"> <button type="roll" name="roll_skill" value="&{template:default} {{character=@{character_name}}} {{rollname=@{trait_name}}} {{effect=@{trait_effect}}}"> <span class="sheet-pictos">w</span> </button> </div> <div class="sheet-col-19-20 sheet-auto-expand sheet-medium-expand"> <span name="attr_class_ability"></span> <textarea name="attr_class_ability" placeholder="Class Abiity"></textarea> </div> <input type="hidden" name="attr_class_ability" value=""/> </div> </fieldset> .sheet-auto-expand{ position: relative; cursor: text; word-wrap: break-word; min-height: 16px; padding: 4px 0px 4px 0px; margin: 2px 0px 0px 0px; border: none; border-radius: 0px; } .sheet-auto-expand span{ visibility: hidden; white-space: pre-wrap; display: block; border: none; } .sheet-auto-expand textarea{ position: absolute; z-index: 1; top: 0px; left: 0px; margin: 0px; padding: 4px 0px 6px 0px; overflow: hidden; resize: none; line-height: 14px; height: 100%; width: 100%; background: transparent; border: none; border-bottom: 1px solid #ebebeb; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .charsheet .repcontrol_add, .charsheet .repcontrol_edit, .charsheet .repcontrol_del, .charsheet .repcontrol_move{ background: white; box-shadow: none; font-family: "Book Antiqua", Garamond, "Times New Roman", Georgia, serif; font-size: 10px; font-weight: bold; color: black; height: 22px; line-height: 14px; vertical-align: middle !important; padding-bottom: 4px !important; } .charsheet .repcontrol_add, .charsheet .repcontrol_edit, .charsheet .repcontrol_del{ display: block; }