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 ponent to changing the childs(columns) width? this is simple code for showing my problem in this question : example

this is my dashboard image :

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 ponent to changing the childs(columns) width? this is simple code for showing my problem in this question : example

this is my dashboard image :

• javascript
• reactjs
• react-grid-layout

Share Improve this question Follow edited Jan 3, 2021 at 8:32 N.SH asked Jan 3, 2021 at 6:16 N.SHN.SH 69311 gold badge88 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you look at the documentation here you'll see that ResponsiveGridLayout is a bination of a ponent called Responsive and a HOC called WidthProvider

import { Responsive, WidthProvider } from 'react-grid-layout';

const ResponsiveGridLayout = WidthProvider(Responsive);

If you look at the code of WidthProvider you may notice it subscribes to widnow resize event

window.addEventListener("resize", this.onWindowResize);

which isn't particularly useful for you, because in your case window does not resize. One way to deal with this problem is to create your own WidthProvider and attach the listener to the element that actually resizes and wrap it around Responsive

 const MyVeryOwnResponsiveGridLayout = MyWidthProvider(Responsive);

P.S. You can try requesting the feature from the ponent creator or volunteer to contribute to the project

I found a better answer than extending the WidthProvider:

Trigger a Window Resize event (without actually resizing the window). I found a delay of 1ms is necessary to make it work.

See this solution: https://stackoverflow./a/62874552/17570516