question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamic measurement is still not working

See original GitHub issue

Hi,

I spent hours on this, but I still don’t believe dynamic measurement is really working in react-virtual. FYI, I read this issue already: #23

This is the example from the doc, but it has hardcoded width and height based on ${virtualColumn.size}px, and ${virtualRow.size}px. The resulting dimensions are controlled by these values and they are not dynamic in this example. https://codesandbox.io/s/github/tannerlinsley/react-virtual/tree/master/examples/dynamic

In my case, I have fixed column widths and every cell can have dynamic height. I don’t think this is supported. Here are my observations.

  1. I tried removing the hardcoded width and height from the example, but as soon as I do so, I get an error that “Maximum update depth exceeded”. It seems it could not calculate the dimensions properly and got stuck in a loop. (Is this a bug?)

  2. Removing only the height from the linked example above makes each cell to have the same height. However, this only works only if every cell in the same row has the same height. As soon as I make several cells have different height within the same row, I get the “Maximum update depth exceeded” error again.

It’s dynamic in a sense that each row can have different heights, but not each cell. (And, this is only for using fixed column width. I’m not sure how this would even work if both row and column had dynamic size.) I wouldn’t call this behavior dynamic.

If it works if every cell in the same row has the same height, wouldn’t it possible to take the maximum height in each row use it across all cells in the row? I’m not sure why it crashes with the error.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:9

github_iconTop GitHub Comments

1reaction
lukesmurraycommented, Feb 10, 2022

I just ran into this so I’ll add the solution that worked for me. Try setting a maximum width/height on your virtualized elements. If you have virtualized columns set a maximum width and if you have virtualized rows set a maximum height. In my case, I was virtualizing columns and one of the columns was growing to fill the entire available width. When I added the maximum width constraint, the update loop went away, and I was able to diagnose the problem.

1reaction
tannerlinsleycommented, Jan 20, 2022

We do need to get the examples fixed, but other than that, the dynamic sizing should work just fine. As for the masonry layout features, we’ll likely need to work our way into that in the next major version. Closing for now.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dynamic measurement not working · Issue #23 · TanStack/virtual
measureRef measures the resulting dimensions of the element, then adjusts the position of it and all other elements based on that measurement.
Read more >
Calculation Groups Causing Measure Dynamic Titles
I created a titles Measure that references Calculation Groups "Scenario". When I change to the "Budget" member of the Calculation Group it ...
Read more >
Dynamic input does not work in AutoCAD
Issue: Dynamic input does not function in AutoCAD. This could include behavior such as: No prompts or feedback display at the mouse cursor....
Read more >
SelectedValue for dynamic Measure | Power BI Exchange
Hi all , Would like to seek some help doesn't seem to able to get it work. ... Basically the parameter is a...
Read more >
Dynamic measurement – are you missing a checkbox?
There the individual systems are checked making sure they are working as intended. Is then the car ready for delivery? No, of course...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found