Isotope elements overlapping other elements

Hi,

I'm having the same problem. So I went to my views_isotope.js file, but I didn't not find any document.ready functions in it. Am I in the right file, or has the file been updated since this post?

No patch attached. See info on "Status": https://www.drupal.org/node/156119

Hi lukejoliat,

as you've re-opened an issue that's been closed for a year, there is a good chance you are using a different version... as you can see this ticket was raised against version 7.x-2.0-alpha1. Please let us know which version of the module you are using.

Jumping in to update the version and say "me too!"

On page load things look like this:

http://stevemccullough.ca/downloads/isotope-onload.png

But on clicking any filter it works as expected (here, I clicked a second time on "All" to get the expected rendering on load):

http://stevemccullough.ca/downloads/isotope-onclick.png

It appears to be incrementing their absolute positioning by a vertical dimension of only 48px, whereas the divs in my case are more like 190px high.

OK, setting

li.isotope-element { height: 192px; }

fixed it in my case.

Okay, we're getting a fair few tickets about overlapping elements. I'm going to try to explain this as clearly as I can.

When Javascript fires and organises the elements into a pretty grid, it needs to know two things:

1) How wide you want your columns.
The column width is not something you can see the way you see your elements... it is a hidden property that is used for layout only. You specify it with your own CSS in your theme. It looks something like this: .isotope-grid-sizer { width: 10%; } or this: .isotope-grid-sizer { width: 50px; } depending on how you're doing your layouts. If you use a percentage, your columns will get smaller as the widow shrinks... but you will always have the same number of columns. If you use a pixel width the number of columns will reduce as you shrink the browser window, but the width of the columns will not. Once that's set, all your elements should be multiples of that value, to specify how many columns they are... so if your grid sizer is 10%, your element widths might be 30% or 60%, etc. But they should never be 25%... because that is not a multiple of 10. (Be careful if you have a gutter... you will need to account for that in your element sizes.)

2) The size of your elements.
Isotope often looks best when your elements have a fixed height and width. That is totally up to you though. You size your elements like this: .isotope-element { width: 40%; height: 200px; }. Now the width should always be a multiple of the column width, but often you will want your element to have a height that is determined by the amount of content in the element... not a fixed pixel height. In this case, leaving the height as auto will be fine if you have only text, etc. If you have post-render-loading content like images, and if you haven't given your images a fixed pixel height (maybe you don't know how high they will be) then when Javascript fires, it will think the elements are small, and lay them out accordingly... then when the images load in, you will see elements overlapping each other. The solution, is to use the ImagesLoaded library, which will fire the layout again a second time after all the images finish loading... this comes out of the box with the latest version, just make sure it is switched on.

I hope this clears things up for people. Based on #8 I'm going to mark this ticket as a support request, but if someone manages to find a valid bug, feel free to open a new bug report.

In the last year, I made several attempts to make the Views Isotope module work.

This thread sums up my experience with the module.

@joonapenttila
$(document).ready(function() {
to $(window).load(function() {

This also worked for me in a previous version.

@steve.m
I have the same problems with the 7.x-2.1 and the 7.x-2.x-dev version.

Unfortunately your fix “li.isotope-element { height: 192px; }“ does not work and is not ideal for a responsive solution with flexible image width and proportions.

@Chris Gillis
Thank you for your effort with the development of this module.

I tried a lot of different layouts with fixed width, percentage width, fixed hight, auto height.
Now, I have a nice responsive solution in place which works perfectly with version 7.x-2.0-beta2+0-dev.

Unfortunately, with version 7.x-2.1 and the 7.x-2.x-dev, again the calculation is not working. -- On page load, Isotope is not firing, or after the images have loaded, they are just piling up in the right corner.

However, after clicking a filter or resizing the page window, everything falls perfectly in place.

Sidemark:
For Drupal 8, I made a manual implementation of the Isotope and the ImagesLoaded libraries width identical styling and some theming, which works fine.

For my Drupal 7 projects, it would be nice to have this working with the 7.x-2.1 version.

Do you have an idea, how this could be solved?
If it helps, I can provide a barebones installation for demonstration.

Hi Thomas, demo would be great, thanks. Also, this module has moved over to https://www.drupal.org/project/isotope - as you require further support I'm re-opening this ticket and moving it over to that issue's queue.

Actually, Thomas, you might find that this issue #2669738: Use URL for Filters not working correctly (filters require 1 extra click) more accurately describes your situation? If so we can close this one and move discussion over there...

Hi Chris,

I tried to work with Isotope (with Masonry and Packery), but had no luck with it, because after install, the view format was missing. For this reason, I continued with Views Isotope. This happens width the Views Isotope (Deprecated) 7.x-2.1 after a page load:

After clicking one of the filters (under hover “ALL”), the script is triggered and the images fall in place (similar to this dev-site):

Mate, screenshots aren't going to cut it... you need a live example. It sounds like the JS isn't firing on load, so someone's going to have to debug your code... it sounds like it is firing before DOM load... have you hacked/patched the script at all?

Also, if the view format is missing, perhaps you didn't enable the isotope_views sub-module?

Mate, screenshots aren't going to cut it... you need a live example.

I sent you an email with links on the above sites yesterday.

It sounds like the JS isn't firing on load,

That’s what I’m saying… My question is: Why it is firing 2.0-beta2+0-dev but not on 2.1?

so someone's going to have to debug your code... it sounds like it is firing before DOM load... have you hacked/patched the script at all?

Nothing is hacked, neither the module nor the scripts, all is out of the box. The only difference is: The first screenshot is from a site running on Views Isotope 2.1, the second example from a site running 2.0-beta2+0-dev.

Of course there is custom styling. But as I mentioned in #10, I have this styling in a Drupal 8 project, where it is running Isotope and ImageLoad without a module. I assume this is not causing the problem.

The JS file in the example you sent me contains this line: $(window).load(function(){ That is not in the module code... is that something you've added in? I recommend deleting your copy of module and downloading it again from drupal.org.

Interesting, you are right…

However, this site is running the 2.0-beta2+0-dev version. If I take the $(window).load(function(){ out here, the script does again not trigger. If I run “drush up views_isotope-7.x-2.1”, the script does not work either. So, the unchanged code does not work for both module versions.

I read this article on the problem.
But even with imagesloaded.js the script does not trigger.

It still sounds to me like you messed up the module... can you please delete it completely and then re-download it? Do you have multiple versions of the module in different places? Like on in sites/all and another in sites/mysite?

For a quick fix, do you have some custom JS somewhere? Like in your theme? Just go ahead and initialise it yourself... something like this:

(function ($) {
  'use strict';
  Drupal.behaviors.myCustomBehaviour = {
    attach: function (context, settings) {
      $('.isotope-container', context).isotope();
    }
  }
})(jQuery);

I was having a similar problem as @Thomas Factory with getting this module to work correctly for me. It was only when I decided to abandon using it that I found a solution for my case. Sometimes the images would overlap and other times the images would fall just outside of the container's boundary depending on screen width. Then as I was changing the view formatter from Isotope Grid to HTML list (throwing in the towel), I thought, let me just see what happens if I go back to Isotope Grid. What do you know, it worked! I noticed that when the settings page came up for the Grid formatter, it picked up data fields that I added some time after initially creating the view but were previously not listed in that settings dialogue. I'm using aggregation and conditional fields also which could have been a factor. Anyhow, maybe this helps someone or maybe it was an Isolated thing.

Thanks for the module!

Ahhhh! Now this sounds like something that can be debugged! Thanks for reporting your symptoms dimmech.

I wonder if you could do a little more debugging for me? Try to retrace your steps in a new, clean view and figure out exactly where the error is introduced? E.G. Adding a column of a certain type without updating the "data columns" setting? Any specifics you can uncover would be very helpful for someone developing a patch, and I would credit you in the commit.

I'm currently focused on the D8 port, so won't be writing the patch myself. Happy for anyone to chip in here. :)

I'll try to duplicate my steps when I get some free time to see if I can break it the same way. It may be a while before that happens but in the meanwhile I'd suggest anyone with similar problems to look at comment #9 first. Then if you are still having problems, try switching view formatters or even rebuilding the view all together.

I'm using patch #2 on #2761365: Allow modules to specify their own content selector and patch #6 on #2761373: Integrate with Views Infinite Scroll 7.x-2.x. I also experience overlapping. My current workaround is explained here. Code on #19 doesn't work for me.