Search code examples
reactjsreact-motion

How to remove vertical spaces between absolute positioned elements in React-Motion

So, I am trying to create a draggable list with React-Motion in my project.

However, I couldn't figure out a way to remove the spaces between the list (see the picture below). I read somewhere that it is due to the nature of absolute elements in HTML. 

// Here is a snippet of the CSS styles
// View the entire codes by clicking the link below

.demo8-item {
     position: absolute;
     width: 320px;
     height: 40px;
     overflow: visible;
     pointer-events: auto;
     transform-origin: 50% 50% 0px;
     border-radius: 4px;
     color: rgb(153, 153, 153);
     line-height: 40px;
     padding-left: 32px;
     font-size: 24px;
     font-weight: 400;
     background-color: rgb(255, 255, 255);
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
}

.demo8-outer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

I have tried to inspect the HTML elements to find the culprit, but to no avail. I couldn't find the element that is causing those spaces; setting margin and padding to 0 doesn't do anything!

My question is, is there a way to remove those spaces without breaking the animation (i.e. by converting it to inline-block, etc.)?

Thank You.

Spaces in between absolute content

Link to sandbox

Solution

  • You can control the height used by spring() configurations

    // `y` prop, here is how the height is calculated
y: spring(order.indexOf(i) * 100, springConfig),

    Change 100 to something like 70 or whatever you like:

    y: spring(order.indexOf(i) * 70, springConfig),