jaredLunde/masonic

Masonry not displaying all cards in absolute position

Closed this issue · 5 comments

justisom commented

Describe the bug
My goal is to be able to use a masonry grid inside a div that is independently scrolling from the rest of the page content.
I typically do this by nesting an absolute position div inside a relative one. In the case of the masonic component this seems to cause
some of the cards to disappear entirely although they still exist within the dom.

To Reproduce
I have an example here: the layout is predictably named "layout" at line 131
https://codesandbox.io/p/sandbox/masonry-absolute-example-vpny7t

Expected behavior
That all 50 of my initial cards load in the div as expected.

I'm by no means a css whiz. I'm very likely doing somethin wrong. If anyone can point me in the correct direction it would be greatly appreciated!

justisom commented

it does not! I will have to take a look at this one. I'll let you know. Thanks!

  • 👍1
justisom commented

This seems to work for me now. However I'm encountering an error because I'm loading data and updating the state:

Cannot read properties of undefined (reading 'length')
useMasonry
layout
/src/MasonryGrid2.js:247:28
  244 |     borderRadius: "4px",                  
  245 |   }}
  246 | >
> 247 |   {useMasonry({
      |              ^
  248 |     positioner,
  249 |     resizeObserver,
  250 |     content,

items is initially an empty list until its updated by a backend data query. I'm putting off rendering of the page until its loaded but it still seems to have issue with this. I can only get it to work if the data is outside the main functions and already exists.

justisom commented

I just realized that "items" is a prop name and not just an argument name. It works now!

Thanks!

jaredLunde commented

Great! Glad to hear it.