mixitup icon indicating copy to clipboard operation
mixitup copied to clipboard

CSS Grid Compatibility

Open patrickkunka opened this issue 8 years ago • 6 comments

TODO:

  • Research currently state of compatibility
  • Make any necessary changes
  • Update docs, demos and tutorials

patrickkunka avatar Nov 17 '17 10:11 patrickkunka

New to all of this so please remove this comment if it’s not constructive ;)

My first time using mixitup I directly went on using it with css grid and have not encountered any issues at all other than maybe having to implement some sort of fallback for the grid itself which is not a mixitup issue anyway.

MartinConde avatar Jan 07 '18 05:01 MartinConde

Thanks @MartinConde that's great to know - I still haven't got around to looking into this but sounds like it might be a non-issue in that case.

patrickkunka avatar Jan 09 '18 21:01 patrickkunka

I tried to implement MixItUp with Grid, I noticed a bug while sorting, it seems some items get the entrance animation twice, they get sorted in their place and then reappearing(resorting), this only happens when the result is 1 item and not on all of them,

I switched the grid to flex and seem to sort the problem.

AKrocks avatar Jan 28 '18 19:01 AKrocks

Thanks for the info @AKrocks (still haven't had time to look into this :( )

patrickkunka avatar Jan 29 '18 20:01 patrickkunka

So I think I have css grids working for the most part.

I had to turn off height clamping because the grid items would expand if we filtered out enough items to remove rows.

I also had to explicitly turn off animations for IE11. but IE and css grids is kind of bonkers anyways due to the lack of auto placement. I'm doing the autoplacement manually in js for IE11 (have to support custom dynamic rowspan,colspan).

So basically I had to opt out of any animation calcs for IE11. I'm sure it can be done, but I'd need to hook in and run my the js autoplacement logic before the final placement calcs were run i.e. setFinal

Other than that. it seems to work like I'd expect.

dalejung avatar Dec 19 '18 15:12 dalejung

@patrickkunka from my testing it seems to work well natively with CSS Grid, but seems to stumble on animations - as per https://github.com/patrickkunka/mixitup/issues/569

sjclark avatar Feb 17 '21 01:02 sjclark