I am using react-grid-layout package for my layout design.
I want to use compactType=null configuration for free items moving on the layout. But when I change the sizes or move items in a row, large gaps appear on the screen as in the screen shot.
Are there any way the fixing layout by removing the gaps after moving items?
Okay I found the solution by modifying the layout array in onLayoutChange function
<ResponsiveGridLayout
layouts={{ lg: layout }}
cols={{
lg: colCount,
md: colCount,
sm: colCount,
xs: colCount,
xxs: colCount
}}
rowHeight={46}
isResizable={isAlignFieldsModeOn}
isDraggable={isAlignFieldsModeOn}
isBounded={isAlignFieldsModeOn}
onLayoutChange={newLayout => {
if (isAlignFieldsModeOn) {
let _layout = newLayout;
if (compactType === null) {
const fixedLayout = newLayout.map(item => {
// the row before the field row
const upperRow = Math.max(item.y - 1, 0);
const upperRowIsEmpty =
newLayout.filter(f => f.y === upperRow).length === 0;
// If there are no fields on the upper row then move up the fields to the upper row.
if (upperRowIsEmpty) {
return {
...item,
y: upperRow
};
}
return item;
});
_layout = [...fixedLayout];
}
// Set the new layout for instant effect
setLayout(_layout);
}
}}
margin={[3, 7]}
compactType={compactType}
useCSSTransforms={false}
id={tab?.id}
key={tab?.id}
measureBeforeMount
width={width}
preventCollision={false}
>
{generateForm}
</ResponsiveGridLayout>