metafizzy / metafizzy/isotope

Items get correctly displayed on 3 columns when using one filter, but get stacked on a single column if using a different filter

Open
#1,663 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
11.1k
Forks
1.4k
PR merge metrics
No merged PRs in 30d

Description

Go to the portfolio section of www.vankish.com

When using the filters ALL and GRAPHICS, it works properly.
When using the filter VIDEO, the items will only use one column.

Makes no sense. I have tried everything. I have read all the docs and lots of similar issues posted here, but still nothing.

Here's the relevant .js

```
// Event listener for handling portfolio filtering and initializing Isotope and Masonry
window.addEventListener('load', () => {
let portfolioContainer = select('.portfolio-container');
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item',
layoutMode: 'fitRows'
});

let portfolioFilters = select('#portfolio-filters li', true);

var masonry = new Masonry(portfolioContainer, {
itemSelector: '.portfolio-item',
columnWidth: '.portfolio-item',
percentPosition: true
});

// Event listener for portfolio filter clicks
on('click', '#portfolio-filters li', function(e) {
e.preventDefault();
portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active');
});
this.classList.add('filter-active');

portfolioIsotope.arrange({
filter: this.getAttribute('data-filter')
});

// After updating the filter, reload and layout Masonry
setTimeout(function() {
masonry.reloadItems();
masonry.layout();
}, 500);
}, true);
}
});
```

Contributor guide

Open the contributing guide

Research direction

Open the portfolio section at www.vankish.com and inspect the provided load handler, especially the Isotope and Masonry setup and the VIDEO filter path. Reproduce the difference between ALL or GRAPHICS and VIDEO, then verify that the filtered VIDEO items use the same three-column layout without disrupting the other filters.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.