Items get correctly displayed on 3 columns when using one filter, but get stacked on a single column if using a different filter
- 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
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