muuri + bootstrap: items in grid overlapping on load

[mmikaela]

Hi,
I'm a student getting my feet wet with code, so let me know if my explanation or JSFiddle doesn't make sense.

I tried to combine Muuri with the Bootstrap framework, since I wasn't sure how else to specify different sizes for different items with Muuri alone. I ran into the issue mentioned in #59, and used some HTML/CSS fixes without knowing the solution from that post and #70.

During and after the process of fixing that, I noticed launching or reloading the page causes the grid items to pile on top of each other randomly instead of adhering to the grid. With every reload, the overlapping is different each time.

If I change my browser window from full screen to a different size, or vice versa, it's fixed. Unfortunately, using a javascript command that resizes the window isn't an option since that will affect the experience of people who usually browse in full screen.

From what I can tell, it seems like the overlapping isn't caused by anything I wrote, but I could be wrong. My fixes for the percentage issue also may be affecting it, since I didn't change layout.rounding to false. I'm just really confused why my code needs the browser window to be resized before it interprets the code properly.

My fiddle
(I couldn't figure out how to source bootstrap or Muuri into this fiddle, so you will probably have to copy the provided HTML, CSS, and JS into your own code editor and source Bootstrap and Muuri to see what I'm talking about. Sorry!)

(PS: I'm also aware my grid awkwardly pushes some items down if the aspect ratio of the browser changes, but that's a different issue that's easier to fix)

[niklasramo]

You are using images inside the items, so you _at least_ need to call .refreshItems() after the images have loaded.

[mmikaela]

I wasn't exactly sure how to add .refreshItems (even after looking at the grid.refreshItems( [items] ) section in the instructions), but I used document.onload.grid.refreshItems(); in my script tags after the grid variable. It helped for the most part, but it still happens. The overlapping isn't as extreme, and/or it doesn't happen consistently upon every refresh.

I put up everything temporarily on a server to help you see what I mean and have a closer look at the code. I also have a screenshot here showing it in the bottom right corner.

[dgeorgy007]

I am using React and I am also getting a random overlapping issue happening.
I use img tags inside divs. To be more precise the image actually completely hides the other image which has been dragged over it.

I've tried calling refreshItems on window.setTimeout of 2secs - to ensure the images have finished loading. But I don't know if this is the same issue as the above.

[niklasramo]

If you use images inside the items and the images affect the items' dimensions you need to do this (at minimum):

var grid = new Muuri('.grid');
window.addEventListener('load', function () {
  grid.refreshItems().layout();
});

window's load event is called after all images have been loaded. Using setTimeout is risky, because you really can't use it to detect when all images have loaded, it _might_ work sometimes.

Best solution would be to react to each image individually using for example this library: https://github.com/desandro/imagesloaded

Here's an old related issue: https://github.com/haltu/muuri/issues/34. Muuri's API has changed from those times though, but the logic is pretty much the same.

[niklasramo]

I really ought to write a paragraph to the docs about dealing with images and links inside the items, because these issues keep popping up.

[dgeorgy007]

I'm calculating the height and width of the items explicitly based on the
image dimensions which are stored in the db.

Isn't this different to the scenario you mentioned?

On 21/11/2017 10:27 PM, "Niklas Rämö" [e-mail] wrote:

If you use images inside the items and the images affect the items'
dimensions you need to do this (at minimum):

var grid = new Muuri('.grid');
window.addEventListener('load', function () {
grid.refreshItems().layout();
});

window's load event is called after all images have been loaded. Using
setTimeout is risky, because you really can't use it to detect when all
images have loaded, it might work sometimes.

Here's an old related issue: #34 https://github.com/haltu/muuri/issues/34.
Muuri's API has changed from those times though, but the logic is pretty
much the same.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/haltu/muuri/issues/111#issuecomment-345998420, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ATybqdK_7dOsvqpugB5TA1JHaqyY0f1Xks5s4rOagaJpZM4QcimH
.

[niklasramo]

Depends on this:

If you use images inside the items and the images affect the items' dimensions...

There are also many cases where an item might look like it's mistakenly overlapping another item if it's content leaks outside the item's boundaries. This has nothing to do with Muuri, it's just CSS. Muuri never modifies items' dimensions, it just reads them.

[mmikaela]

Hi everyone, thanks for your help! My images will always be a 1:1 ratio so I'm not sure if my problem is applicable to what dgeorgy007 mentioned, but the code that niklasramo posted worked for me! I know you mentioned it in your first comment, but I'm still learning Javascript/JQuery syntax so I wasn't sure where to put it until you spelled it out more. Thank you again!