metafizzy
Isotope overlapping divs on first page load, refreshing or clicking show all fixes? 100% reproducible in incognito
First time user of Isotope, All I want to use it for is filtering what items are shown on my web-store that I have redesigned. I built it in bootstrap all static first and it was fine, I added isotope and got it working static, then i converted it to Wordpress which took forever to figure out how to make it work with Wordpress as it just wouldn't load the jquery.
When loading the page for the first time as a first time user, isotope screws up the formatting, like below:
This happens 100% of the time, so you can reproduce it as a "first time view" if you use an incognito window, Ive tried in both Chrome and Firefox, same results.
If you refresh the page, or if you click on the buttons then back to show all, it seems to fix itself.
I cant have this be the default view for a first time user of the store. How can I fix this?
Live https://piratemc.com/store2/
The JavaScript is being loaded via store.js https://piratemc.com/wp-content/themes/piratecraft/js/store.js?ver=1.0.0
Im not very good with Javascript at all, so I'm lost on how to even diagnose how to fix this.
@TomLewis — I believe calling the layout function after load should fix this issue for you, grid.isotope('layout').
@TomLewis Could you create a CodePen to replicate a reduced test case, then? I'm happy to help, but I need a bit more context.
I am getting same issue. Boxes overlap and don't look good. When you refresh looks perfect.
If I take out reference to https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js then it is fine but the filter then doesn't work so there must be some bug in this file.
@webchap — like I told the OP, if re-calling layout doesn't work, I need some sort of reduced test case, otherwise it's going to be tough for me to help with the specific issue.
I was having the same issue. I'm using isotope in a Wordpress setting. Don't know if that's the issue though.
For me I had to put a setTimeout on the layout function. Then it worked.
setTimeout(function(){grid.isotope('layout')}, 300);
ugly, but it works.
@pjarnfelt yeah, not the greatest, but one of the solutions i have used in the past as well. at some point, in one of the many, many projects i have lying around, there is a much better solution, but unfortunately i can't seem to find it.
however, if anyone can just get this replicated in a pen, since i'm helping out with support here, i will attempt to get this issue actually fixed for real, but i really need someone to get a proper test case running for me.
@thesublimeobject We would if we could, It just makes it near impossible being part of Wordpress, as all sorts of garbage is loaded with Wordpress, I wouldn't have a clue how to replicate the same issue in a pen.
Im still having the issues and my url is still live from the initial ticket that you can see it. Ive not been able to release my store update due to this bug at present, and my Javascript is so limited I'm reliant on this awesome help from people that have a better understanding than me! It took me such a long time to get it working with wordpress as none of the examples explain how to get it working in a wordpress environment.
@pjarnfelt could you please check that I have implemented it correctly for wordpress before I update it to a setTimeout? I only got it working through trial and error and have no idea if what I did is correct!
Thank you for posting!
I figured out what the problem was in my case. Image loads!
While the image is loading, the height is not know by Isotope at the grid layout time. (this is especially a problem with a dynamic height when width is 100%)
I made a plnkr that shows the problem every time (especially on a slow connection) together with a CSS solution that worked for me (other than calling layout again after load and with a timeout, since we also don't know when the images are fully loaded).
The solution is a container with the height set to the known aspect ratio (which however requires you to know the aspect ratio of the image).
Here's the plnkr https://plnkr.co/edit/qQDG5OLv94x5pJwq
@pjarnfelt you genius! I think you solved it! I just added width and height to the images in my containers, and from super rudimentary testing it seems as if its solved! Thank god it was this easy!
I tried width and height before and it worked, only downside for me is the site is responsive so the images re-size when viewed on different devices. May try a min-height css style
I tried width and height before and it worked, only downside for me is the site is responsive so the images re-size when viewed on different devices. May try a min-height css style
Yeah same, I just use bootstrap and img-fluid for the images, and it seems to work!
Yep, I'm pretty sure this was what I did. I think I wrote a function around it. Let me go back tomorrow and look through my old Wordpress projects to see if I can find it.
Wordpress (or any other plugin) adds Lazy Loading of images which causes the problem. Disable Lazy Loading and it works :-)
If having images in the IOSTOP then please remove Lazyload from the image.
I loaded the isotope scripts in the <head>, instead of at the end of body </body> this helped fix the problem on page load.
