Help with custom sheet repeating sections - misaligned move and trash icons

Hey everyone - hoping someone could help me find the issue causing this. Custom sheet repeating section works fine, however when I click Modify the move/trash icons are misaligned.   Screenshot prior to Modify: Click Modify : Here's the HTML and CSS: div.sheet-line { border : none ; padding : 0 ; clear : left ; margin-top : -.5em ; font-family : 'Merriweather' , Arial , Helvetica , sans-serif ; font-weight : 400 ; } /* Equipment */ div.sheet-vs1 , input [ type = text ] .sheet-vs1 , div.sheet-vs2 , input [ type = text ] .sheet-vs2 { float : left ; text-align : left ; margin-bottom : .8em ; font-size : 90% ; } div.sheet-vs1 { border-bottom : .1em solid transparent ; border-top : .1em solid transparent ; } div.sheet-vs2 , input [ type = text ] .sheet-vs2 { border-bottom : .1em solid transparent ; border-top : .1em solid transparent ; margin-bottom : .5em ; } div.sheet-vs2 , input [ type = text ] .sheet-vs2 { margin-bottom : .5em ; } .repeating_equipment { padding : 0 ; margin-top : 3.5em ; border : .1em solid transparent ; background-color : transparent ; box-shadow : none ; font-size : 90% ; text-align : center ; border-bottom : .1em solid black ; font-family : 'Merriweather' , Arial , Helvetica , sans-serif ; font-weight : 400 ; } .repcontainer [ data-groupname = repeating_equipment ] > .repitem .repcontrol_del { font-family : "Pictos" ; font-size : 0.5em ; padding : 3px 7px 2px ; } .repcontainer [ data-groupname = repeating_equipment ] > .repitem .repcontrol_move { font-size : 0.5em ; padding : 3px 7px ; } < div class = "line" > < div class = "vs1" style = " width:80%; font-weight:bold" > Inventory </ div > </ div > < fieldset class = "repeating_equipment" > < div class = "line" > < input type = "text" class = "vs2" name = "attr_equipment" value = "" > </ div > </ fieldset >

What do you mean by misalined? That's their normal placement.

In the images, do you see how the last move/delete pair is above the last item in the list?  The first move/delete pair is appearing above the title. 

By the way, their position is based on the itemcontrol element, which looks like this: .ui-dialog .charsheet .repcontainer .repitem .itemcontrol { display: none; position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.40); } if you want to change their horizontal positions, the easiest way is probably to change the width and add a left margin, and experiment .

ShamanGreeny said: In the images, do you see how the last move/delete pair is above the last item in the list?  The first move/delete pair is appearing above the title.  Oh I see now - they are all one row above where they should be? I'd have to expetriement to see what exactly is causing that. I don't have time for that now, and might not tomorrow. If you want a quick response, hopefully someoe else can help. If you're willing to wait, I'll look at this by wednesday.

GiGs said: ShamanGreeny said: In the images, do you see how the last move/delete pair is above the last item in the list?  The first move/delete pair is appearing above the title.  Oh I see now - they are all one row above where they should be? I'd have to expetriement to see what exactly is causing that. I don't have time for that now, and might not tomorrow. If you want a quick response, hopefully someoe else can help. If you're willing to wait, I'll look at this by wednesday. Correct - it looks like they either go up 1 row before where they should be or there is a buffer/margin at the bottom of the list causing the issues.  I'll poke around the CSS you mentioned in the previous post and see what I can find.  Thanks for the guidance!

Based on my test, the problem is float in this block below: div.sheet-vs1 , input [ type = text ] .sheet-vs1 , div.sheet-vs2 , input [ type = text ] .sheet-vs2 { /*    float:left; */     text-align : left ;     margin-bottom : .8em ;     font-size : 90% ; } Remove it, or comment it out as I have done here, and the block starts working. I'm not sure why you were using float. I can't remember the last time I used it - you rarely need it, and certainly not for layouts like this. There is unrelated problem. You have this: .repeating_equipment { That targets nothing on the sheet so that entire declaration block will be being ignored. The class in a fieldset works differently from all other classes on a sheet, because the fieldset is never displayed - it is always hidden. It is a set of construction instructions in the repeating section, but is never actually displayed. Instead when anyone clicks the add button, a new repitem is created - your row is inside that. You have used this code: .repcontainer [ data-groupname = repeating_equipment ] > .repitem .repcontrol_del { and this is the kind of code you need to use. This will suffice: .repcontainer [ data-groupname = repeating_equipment ] or if you are targeting the rows, and not the entire section: .repcontainer [ data-groupname = repeating_equipment ] > .repitem Hope that helps!

Brilliant.  Thank you GiGs!  That's great detail on the fieldset class as well, I obviously did not make the connection with the CSS repeating_equipment tag and the results that are stored behind the scenes.