Large gaps when overlapping items without vertical compacting
Puetz opened this issue · comments
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
- Go to Example 11
- Drag one item downwards so that it barely overlaps with the item underneath it.
- 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
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
same question, looking forward to a reply