Muuri: Asymetric content - re-layout (on drag/drop) overlaps

[bsherwoodofdaptiv]

I am generating content where many items have item content that is wider than most other items.
I do have the CSS for '.item' width and height set to AUTO.

Note: Content is created in two stages

1. Create some 'item-content', and stuff a table in it with TD fields that have IDs
2. Post display of tables (now grids), back fill table TD fields with dynamic data.

This action will make any 'item-content' / 'item' larger than it was originally.

With drag and drop, I can drag a wider 'item' to the right of something, and see all of its content. But if I then drag a narrower item onto the wider item (forcing an insert / shuffle), it lands on top of the wide content instead of beside it.

Here is a JSFiddle example. Note that at the end of the javascript, the dynamic content is added to the TD cells. https://jsfiddle.net/9vk4kap5/

You can also note, 'item-content' that was created wide initially does not suffer this issue.

I guess, in the end, how do I get the grid to re-layout to deal with the size change of an 'item' and not cause overlapping? Or is this a bug that should have been auto detected and handled?

[bsherwoodofdaptiv]

Add-on note: If I resize the browser window, even just slightly, all panels ('item') adjust correctly automatically.

[niklasramo]

The example you provided works just fine for me and I see no issues with it. Well, there's just one CSS thing you might want to watch out for that's specific to your example. You should let width and height be auto for both the .item elements and .item-content elements. Currently the .item-content elements overflow out of the the .item elements. Note that width and height are by default auto so you can just remove those style props completely.

But yeah, Muuri does not detect when items' dimensions change, and it's intentional. You have to call grid.refreshItems().layout() when you want Muuri to recalculate items' dimensions and relayout the items. When you resize the window Muuri does that exact operation automatically since it is very likely that the dimensions have changed.

[bsherwoodofdaptiv]

Yes, I saw that I had put the order of events into the example incorrectly. I updated to prove it would fail, but failed to update this page.

This version fails correctly ( ???). https://jsfiddle.net/9vk4kap5/6/

It is obvious when your screen is fairly wide so that things render on two lines. The two large boxes should be on the top line. They will overlap. Then anything moved up will overlap the big box as well.

I tried the refresh on my own code, and it didn't work. I'll try it on this JSFiddle separately.

[bsherwoodofdaptiv]

Okay, in the Fiddle, putting "grid.refreshItems().layout();" as the last line in the javascript does make it behave as desired. So I must have some quirk in my other code.
Closable as 'works as expected' when using 'grid.refreshItems().layout();' after a dynamic content update.