Fixing Layout by Removing Spaces of React Grid Layout When Set Compact Type Null

Question

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?

Answer 1

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>