How can re-render react-grid-layout column's width on parent's resizing? not window resizing

[nasringh]

I have a dashboard panel using react js that I used react-grid-layout in it; I used react-grid-layout in my content and that works correctly but when I close my right side or left side panels (drawers) , the width of my content that is the parent of my react-grid-layout modifies but after this changes my column's width did not modify according to their parent's width size; How can I reload my ResponsiveGridLayout component to changing the childs(columns) width?
This is simple code for showing my problem in this question example

[rajat-sf]

We are also facing similar issue. Waiting for any solution.
@nasringh have you implemented any workaround for this, if yes then let me know.
Thanks.

[yufan1029]

I have the same problem waiting to be solved.

[dtksi]

+1

[rajat-sf]

HI To resolve this issue we can use SizeMe module.Please find attached screenshot. *https://www.npmjs.com/package/react-grid-layout#providing-grid-width <https://www.npmjs.com/package/react-grid-layout#providing-grid-width>* <SizeMe> {({ size }) => ( <Responsive style={{ border: "1px solid red", }} width={size.width as number} breakpoints={breakpoints} className="layout" cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} rowHeight={50} compactType={"vertical"} isResizable={false} isDraggable={false} preventCollision={true} onResizeStop={(_, oldItem, newItem) => handleDragging({ oldItem, newItem }) } onLayoutChange={(currentLayout) => { setCurrentLayout(currentLayout); }} onDrop={(newLayout, layoutItem, event) => { handleDrop({ newLayout, layoutItem }); }} onDragStop={(_, oldItem, newItem) => handleDragging({ oldItem, newItem }) } isDroppable={true} onBreakpointChange={(newBreakpoint: typeof currentBreakpoint) => { console.log(newBreakpoint); setCurrentBreakpoint(newBreakpoint); }} onWidthChange={(containerWidth) => { console.log(containerWidth); onWidthChange(containerWidth); }} {currentBreakpoint && children} </Responsive> )} </SizeMe>

…

On Sat, Jan 30, 2021 at 11:24 PM dtksi ***@***.***> wrote: +1 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1369 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASNP3NJINYL7Q6CRCKJCBWLS4RBVBANCNFSM4VSQOVUA> .

-- *Rajat Kumar* Engineer- WebApps *SourceFuse* *T:* +91-805-370-0863 rajat.kumar@sourcefuse.com <Pallavi.verma@sourcefuse.com> | www.sourcefuse.com

-- This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.

[yufan1029]

Thank you very much. The problem has been solved.
@rajat-sf

[YashiPatel]

I have implemented react-grid-layout for my dashboard, it’s properly working with resize and dragged, I am used COREUI template. The problem is, when the dashboard is open with drawer and if, I can resize me window , that time drawer is close, and all grid is smaller then window size, it can not capture current size of window, then again maximize with full screen, that time drawer open and react-grid-layout can consider whole area of window it not consider size of drawer, and my whole grid is out of react-grid-layout area.
So, how can solve my problem with drawer?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days

[zhaoqi-nb]

@yufan1029 我现在也有这个问题，请问怎么解决呢

[vincecoscia]

I was struggling with this issue for a while. React SizeMe didn't feel as intuitive as I wanted and wasn't yielding any results.

My side nav's "isCollaped" state is stored in context which I pass to my react-grid-layout component. Using useEffect, I dispatch a resize event to the window to force the grid to re-render. See below.

useEffect(() => {
    // when isCollapsed changes, we need to dispatch a resize event to the window to force the grid to re-render
    setTimeout(
      ()=>{window.dispatchEvent(new Event('resize'));},
      200
      );
  }, [isCollapsed]);

This still uses the ResponsiveGridLayout with the WidthProvider (The WidthProvider ONLY listens to resize events which is why this works). Another note is to change the timeout to however long it takes for your sidenav to collapse/expand. Mine is 200ms and works perfectly, but yours may be longer or shorter so keep it in mind. Hope this is more intuitive for you all!

[lakshya-sky]

import RGL from "react-grid-layout";
import { withResizeDetector } from 'react-resize-detector';

const ReactGridLayout = withResizeDetector(RGL);

function LocalStorageLayout(..){
    return <ReactGridLayout {...}>....</ReactGridLayout>
}