Shape 5

I have created a second instance of the Masonry widget and assigned it to target a category page (the first instance is assigned to the home page). I have set the filter to the current category - Storage. However, there were two unexpected results:

1. The widget is not filtering out the articles according to category -- it still pulls in articles from all categories. The page does give me the option to click the category button and then it filters correctly, but it's not activated by default when the page loads. How do I get Masonry to filter a category by default?

2. Wordpress' default timeline-based category list is still visible under the Masonry widget. How do I disable it so Masonry is the only list view?

Here is the page: http://www.hackerdad.co/category/storage/

Thanks!

There is currently no way to disable the content area in a category.  To do something similar, you would need to create a normal page or post and disable the content area in the S5 Options section of the editor, assign Masonry to that page/post, and link to the page/post instead of to the category.

As for the issue of the wrong category content, I'd probably need to take a look at the code to see if I can figure out why it's working that way.  Would you be able to PM me with FTP access details and WP login information?  If you can get it to me by the end of the day, I'll try to take a look at it first thing in the morning tomorrow.

PM sent. Here is another issue I just came across with Masonry. When the home page loads, occasionally the posts in the columns will run over each other and the "load more" button - see the screenshot attached. This usually happens when the page is loaded the first time in the browser (not cached). I've experienced this in Chrome, Firefox and Safari.

Thanks for your help

Thanks for the info.  I've replied to your PM.

Tested the overlapping issue some more. Seems to be occurring in Chrome pretty consistently -- just hit refresh a few times, and it happens. Here is another screenshot, showing overlap of topics and over the Load More button.

I can't seem to get the overlapping problem to happen on my computer, so I've forwarded this thread to the other developers to see if it happens for them.  I'll let you know what they find.

Nobody else seems to be able to re-create the problem you're having; is it possible that something on your computer is causing it?

I've tested it on 3 different computers at home and work -- OS X El Capitan, Windows 10, and Windows 7. On all three, the issues occurs pretty regularly in Chrome -- if it's not the first time the page is loaded, then it usually happens on the first or second page refresh. Firefox seems to be affected less frequently. When I inspect the code when the overlap happens, I see that class="item fadein" for the second Masonry article in the right column incorrectly calculates its position from the top:

<div class="item fadein" style="position: absolute; left: 458px; top: 348px;">

When the page loads correctly, the same module shows this position:

<div class="item fadein" style="position: absolute; left: 458px; top: 487px;">

So, in the right column it's off by 139px. In the left it's off by 214px. Hope this helps

I'm still unable to duplicate the issue, but I've passed on the additional information, hopefully I'll hear something else back soon.  I'll let you know when I've got something to tell you.

Tristan,

I searched the support forums and it looks like there was another post with a similar problem for Masonry. The forum system won't let me view that post because my "paid membership" does not match that forum, but perhaps you can check it out. The snippet from the search results sounds like the same issue:

Subject:   Masonry Items overlap
in Masonry - Club http://www.shape5.com/component/option,com_smf/Itemid,75/topic,38652.0/

Masonry Items overlap by michaelbud
...  have more than one row of items in the masonry module, the items over lap each other,  ...
...  the window (even just slightly, The masonry Divs "pop" into place and reveal the  ...
...  content...
See attached pics of the overlap on your demo site.
I tried Safari and  ...

The thread you linked to shows that the issue it was referencing was fixed in the Joomla version of Masonry before the WP version was even created, which should mean that the fix was included in the WP version, but I've contacted the developer that worked on the fox for the Joomla version; hopefully I'll hear back from him soon with more detail about how it was solved for Joomla.

It would appear that none of the other developers can seem to duplicate the problem you are having; unfortunately, if we can't see it happening & look at the code, we won't be able to find out what is causing it.  Is it possible that a browser extension or something else on your computer is causing the issue?

The thread you linked to was solved long before the WP version of the plugin was created, and the only code that's different between the two is the code that handles the integration with WordPress - nothing that generates content structure, so it wouldn't have any impact on how things appear in the browser.

I recommend making sure your browser is fully updated, and checking to make sure you don't have any extensions that could be causing problems.

Tristan,

It's puzzling that your team can't duplicate it. Are they testing the home page? So far, I've replicated it on every computer I've tried - 5, at work and home, so I can't see how it could be computer-specific. All run the most current version of Chrome.

As far as other extensions, the problem started with the site-shaper load of the template, before I added any other extensions.

I've been troubleshooting it for the last few days:
- If I try it in Chrome's Incognito window, it happens on the first try every time -- top right article gets overlapped by the one below, and the Load More button gets overlapped by the lower left article - see screenshot.
- Resizing the Width (not the height) of browser window fixes the issue - the Masonry divs pop into place
- disabling widgets above the Masonry on home page does not fix the issue
- it affects other Masonry pages with more than two articles, like http://www.hackerdad.co/threats/
- Disabling Load More or removing the post limit does not affect the issue
- Disabling the Read More button does not fix the issue

Since the issue is sporadic, could it have to do with the timing of when certain functions or scripts load? Is there some specific code you need me to grab for you when this happens?

For now, I set  .item.fadein with a min-height equal to the height of the top-right Masonry div. That seems to have fixed the issue for the larger screens. Definitely not an elegant solution and it does not scale right for smaller tablets, but it still looks better than overlapping!  

.item.fadein {
   min-height: 487px;
}

Does this help your team troubleshoot? Do they have a more elegant workaround?

What resolution are the computers that you are having the issue on?  I had an idea that the issue might be with smaller screens, but even with the browser window sized down, the issue still isn't showing up for me.

Several kinds:
- Macbook Pro with Retina display - 2880x1800
- Surface Pro 3 - 2160x1440
- HP Pavilion laptop - 1920x1080
- Dell Latitude laptop with external monitor - 1440x900

I doubt it will overlap with the min-height property hard-wired in custom.css, but I am concerned that setting might affect scaling and responsive layouts. And it might still overlap divs that are taller than the min-height setting.

At this point, I'm not sure what to tell you.  All of the developers have looked into it, and none of us can duplicate the problem you're having. 

OK, thanks for looking into it. The min-height hack seems to be working for now. Hopefully it does not break any of the responsive code. I will ping you if I run into any more issues with this.