Your docs would need this important update

[thednp]

While working with Muuri I figured there is a way to work with grids (bootstrap like) that have different widths for different screen sizes and the internal resize _resizeHandler. I initially starter messing with the layout options, then custom resize handlers, but nothing solved this issue:

https://user-images.githubusercontent.com/6761246/150699381-195deccd-1f08-4940-9cd1-f51e7c627ed1.mp4

You can just leave all layout settings to default and use overflow: hidden for your container or the .grid-item / .muuri-item.

@niklasramo I wish this info to get posted somewhere, a ton of people will thank you.

[niklasramo]

@thednp I'm sorry for being a bit thickheaded, but could please describe the issue more explicitly and how applying overflow:hidden to the container or the items solves the issue?

In your video I see that there's some whitespace cut out from the grid's bottom when using overflow:hidden, is that the issue here (the whitespace)? In any case, would also love to have a codepen which I can tinker to see what's going on.

And yes, if this solves some issue I'm happy to add it to the docs (or preferably fix it), but I need to understand the issue first better :)

[thednp]

@niklasramo yes man, the issue is the large whitespace resulted after grid items have changed their width on window resize (items have different widths for mobile, mobile-landscape, desktops, lg, etc). This is something I've been tinkering with since I started to work with Muuri and hesitated to use it since because of it.

I've created this codepen but the issue isn't there for some reason I can't determine right now. Will let you know as soon as I find out.

My exact problem is that I can set a nice transition: height 0.33s ease for the .grid element which works with resize handlers, but it doesn't work when calling a filter() on the grid instance. So I need a way to add overflow: hidden to the .grid container ONLY when calling .filter() and I need another callback to reset overflow when animation is complete, but to my knowledge I don't have any event in Muuri that triggers on the grid instance and is related to animation complete.

[thednp]

@niklasramo how can we schedule to run a function when animation ends?

[niklasramo]

the issue is the large whitespace resulted after grid items have changed their width on window resize

This is news to me, sounds like a bug or something gone wrong in the implementation. If overflow:hidden fixes it then go for it, but this issue should be investigated more since it should not happen in the first place AFAIK with or without overflow:hidden.

it doesn't work when calling a filter() on the grid instance

There should not be anything particularly special happening in .filter method... interesting.

how can we schedule to run a function when animation ends?

Well, there is no single event for any animation's end. We have layoutEnd, showEnd and hideEnd which are probably the events you need to listen to in this case.

[thednp]

Well, there is no single event for any animation's end. We have layoutEnd, showEnd and hideEnd which are probably the events you need to listen to in this case.

Instead of trying to listen for layoutEnd, showEnd, hideEnd or make it trigger animationEnd I've gone with a more simple approach which works every time:

// this is on calling `filter()`
const elementStyle = self.element.style;
elementStyle.overflow = 'hidden';

setTimeout(() => {
  elementStyle.overflow = '';
}, Math.max(showDuration, hideDuration) + 17);

The easiest way to come close to the issue is to have transition: height 0.33s ease for the .muuri container, but again, this cannot be reproduced with your demo. I think it must be an issue with my fork version of muuri where I've removed web workers, so probably I shouldn't waste your time on this.

[niklasramo]

Aha, if you're indeed using forked version and can't reproduce the issue in unforked Muuri then it's most likely an issue in the fork and we can close this issue.

If you want to use synchronous layouts in Muuri (no web workers) you just need to do this: https://github.com/haltu/muuri/issues/416#issuecomment-675516262. No need to fork Muuri only for that :)

[thednp]

What I need is ~30kb of pure ES6 code only with filter and sort for the front-end, currently muuri is 80kb+. But hey, thanks for the input nevertheless.

[thednp]

@niklasramo just FYI, I figured out exactly why the transition doesn't work. If the grid container is the last or only element of a centered parent, it won't do the transition, which means there are ways to solve the issue without overflow: hidden.

Cheers :)