Large gaps when overlapping items without vertical compacting

[Puetz]

Describe the bug

Hello,

I want to use the grid layout with compactType={null} and allowOverlap={false} in order to freely position items.
If I now drag one item on top of another item, the second item gets pushed down vertically way too far and there is a large gap between the two items.
You can easily see this issue in Example 11 if you move any item just a little bit downwards so that it barely overlaps with the item underneath it.

I would expect that the second item ends up directly underneath the first item.

If the grid layout actually works as intended and this is not a bug, is there a way for me to achieve my desired behaviour?

Thanks a lot.
Kind regards,
Thomas

Your Example Website or App

https://react-grid-layout.github.io/react-grid-layout/examples/11-no-vertical-compact.html

Steps to Reproduce the Bug or Issue

1. Go to Example 11
2. Drag one item downwards so that it barely overlaps with the item underneath it.
3. The second item gets pushed downward for it's entire height and there is a gap between the two items.

Expected behavior

I would expect that the items end up underneath each other without a gap.

react-grid-layout library version

1.4.2

Operating System Version

macOS

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

[masachi]

I have faced this issue before. And I have implement a function with deleting blank line with two objects after onDragStop and onResizeStop callback.

By separating layout to object with { [lineNumber (eg 0, 1, 2)]: [item.i] } and calculate the gap line with two lines.

export const processNoBlankLine = (layout: Layout) => {
  const yListWithKey = {};
  layout.forEach((item) => {
    if (yListWithKey[item?.y]) {
      yListWithKey[item?.y] = [...yListWithKey[item?.y], item.i];
    } else {
      yListWithKey[item?.y] = [item.i];
    }
  });

  const compareWith = getStatics(layout);
  let blankLines = 0;
  Object.keys(yListWithKey)
    ?.map((key) => parseFloat(key))
    ?.sort((a, b) => a - b)
    ?.forEach((key) => {
      let currentLineItems = layout.filter((item) =>
        yListWithKey[key].includes(item.i),
      );
      if (compareWith?.length > 0) {
        let currentLayoutBottom = bottom(compareWith);
        let currentLineBottom = bottom(currentLineItems);
        let maxHeightOfCurrentLine = Math.max(
          ...currentLineItems?.map((item) => item?.h),
        );
        console.log(
          'currentLayoutBottom',
          currentLayoutBottom,
          currentLineBottom,
          maxHeightOfCurrentLine,
          key,
        );

        let gap =
          currentLineBottom -
          maxHeightOfCurrentLine -
          currentLayoutBottom -
          blankLines;
        if (gap > 0) {
          blankLines += gap;
        }
      }
      if (blankLines > 0) {
        currentLineItems.forEach((item) => {
          item.y -= blankLines;
        });
      }
      compareWith.push(...currentLineItems);
    });

  return layout;
};

This code works in my project

[hjtgzh]

same question, looking forward to a reply

[ManfredA]

any luck on this? I'm facing the same issue, also on using compact null the static elements are not behaving as expected and are being pushed by other elements when dragging them around.

The behavior:

Screen.Recording.2024-04-01.at.3.07.55.PM.mov

Here the code sample:
https://codesandbox.io/p/sandbox/affectionate-rain-pn5h65