search

haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.8k stars 644 forks source link

How we can use a loader? #428

Closed danielriosb closed 3 years ago

danielriosb commented 4 years ago

Question: Excellent library, thank you. I have been struggling with it when I add Muuri inside a display:none container. The items render one over the other one. I ended up debugging Muuri and looks like the reason is this functions getBoundingClientRect() that return values 0 when the container is not visible. In the same context, if I want to make it nicer and use a loader before rendering Muuri, it is not rendering with the items well organized. Hope this makes sense. Happy to help.

niklasramo commented 4 years ago

Yep, if the item dimensions cannot be retrieved from the DOM (e.g. display:none) then Muuri can't really do the calculations. But gladly there are plenty of other ways to hide an element than display:none. You could e.g. set opacity:0 or visibility:hidden and give it pointer-events:none while it's hidden so it's not interfering with the rest of the site.

Alternatively, you could add the items dynamically after the page is loaded via the grid.add() method.

I hope this helps :)

danielriosb commented 4 years ago

Thanks for answering. Yes, it helped. Also, I was trying to render the items with values in the filters. I will try what you just said.