Comments (7)
@winkler1 I'm not sure if you're still looking for an answer...
I have a similar situation where I'm trying to integrate the react-grid-layout into my project with a variable number of widgets. Each widget loads with a spinner and then fetches data from different endpoints that result in variable size content. The result is that the nested child in GridItem
either overlaps other widgets or doesn't take up enough space to "fill" the GridItem
.
I'll disclaim that I'm new to React, so I'm not sure if this is the best pattern...
I have a React component that renders the ReactGridLayout
. It stores the layout
array in the state
. A callback is passed into the child ("widget") component via props
. Once it renders, the callback is called with this.getDOMNode().offsetHeight/offsetWidth
as parameters. The callback then computes the dimensions in grid units (similar to GridItem.calcWH(..)
) and updates the state
. The grid re-renders and the spacing looks correct.
from react-grid-layout.
In order for this to work properly with moveable widgets, we need to know the height of every widget, which we can only know after the image loads.
It might be possible if you set the rowHeight to a very low number (1 or 2px), and update the internal layout on every img load event.
from react-grid-layout.
That sounds like a good way to do it. You're going to have to reach into
the DOM, there's no other way to know how large the item will render in
the DOM until you render it. There could be images, variable length
text, variable widths, etc. This is one of those cases where if you want
a perfect server render, you're going to have to either use something
else or render in PhantomJS.
On 5/6/15 5:26 PM, phchang wrote:
@winkler1 https://github.com/winkler1 I'm not sure if you're still
looking for an answer...I have a similar situation where I'm trying to integrate the
react-grid-layout into my project with a variable number of widgets.
Each widget loads with a spinner and then fetches data from different
endpoints that result in variable size content. The result is that the
nested child in |GridItem| either overlaps other widgets or doesn't
take up enough space to "fill" the |GridItem|.I'll disclaim that I'm new to React, so I'm not sure if this is the
best pattern...I have a React component that renders the |ReactGridLayout|. It stores
the |layout| array in the |state|. A callback is passed into the child
("widget") component via |props|. Once it renders, the callback is
called with |this.getDOMNode().offsetHeight/offsetWidth| as a
parameters. The callback then computes the dimensions in grid units
(similar to |GridItem.calcWH(..)|) and updates the |state|. The grid
re-renders and the spacing looks correct.—
Reply to this email directly or view it on GitHub
#2 (comment).
from react-grid-layout.
@STRML How does the calculation work with the rowHeight and the GridItem
h? Even if I set the rowHeight to 1 the calculations are always way off. I've also tried changing the padding and margin to [1,1]
from react-grid-layout.
@phchang Would you mind sharing your solution for dynamic resizing? I have the same issue--this widget is perfect for my needs but the heights are dynamic--if I could fix the layout to match then I would be in good shape.
from react-grid-layout.
@winkler1 I'm not sure if you're still looking for an answer...
I have a similar situation where I'm trying to integrate the react-grid-layout into my project with a variable number of widgets. Each widget loads with a spinner and then fetches data from different endpoints that result in variable size content. The result is that the nested child in
GridItem
either overlaps other widgets or doesn't take up enough space to "fill" theGridItem
.I'll disclaim that I'm new to React, so I'm not sure if this is the best pattern...
I have a React component that renders the
ReactGridLayout
. It stores thelayout
array in thestate
. A callback is passed into the child ("widget") component viaprops
. Once it renders, the callback is called withthis.getDOMNode().offsetHeight/offsetWidth
as parameters. The callback then computes the dimensions in grid units (similar toGridItem.calcWH(..)
) and updates thestate
. The grid re-renders and the spacing looks correct.
useEffect to help this lag go away. I am also doing similar thing in my PWA. Get a base dimensions for the widgets with ids and layouts also using the same ids as index. in useEffect === onLoad I simply set h = clientHeight/150. works flawlessly.
from react-grid-layout.
@aphougat, I am dealing with the same issue in my project. Would you mind sharing you solution here?
from react-grid-layout.
Related Issues (20)
- onLayoutChange is always called twice HOT 2
- On reloading the content inside my one cell of grid change its size HOT 6
- Bounded Layout is broken after upgrade to v1.4.4 HOT 7
- Have errors in utils.js && ReactGridLayout.js HOT 4
- Dead Link on https://github.com/react-grid-layout/react-grid-layout
- Dragging is bugged when having a custom margin and rowHeight HOT 1
- Looking for placeholder appears ratio setting
- Currently supporting VerticalCompact, does it not support HorizontalCompact
- Using with Nextjs 14 HOT 3
- [rtl resize] In RTL resize, when I try to shrink it, it gets bigger instead
- Race condition on React 18 setState causes mouse to "skip" when dragging / resizing. HOT 7
- Positioning and Resizing does not work as intended in production mode HOT 2
- The performance of the grid layout is adversely affected when dealing with large SVG grid elements (size ≥ 1MB). HOT 3
- dragging working not correct HOT 10
- Setting item height based on rowHeight in OnResize is buggy HOT 1
- The x,y coordinate of the item is incorrect
- When columns are thin and column spacing is set, items move from their grid position when clicked HOT 3
- Issue with Red Color Popover on Item Click in Versions 1.4.3 and Above HOT 7
- [feature request] Drop onto another widget
- Dynamic static changes on children do not change children rendering HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-grid-layout.