colcade
colcade copied to clipboard
display property not work
when I try display:none on element it still include it in layout Its need when using colcade with filter layout ...
Thanks for reporting this bug. I'll have to take a look.
Any luck with this? I have the same issue.
I'm trying to create a filter. I'm using the following function to initialize Colcade:
function initializeGrid(grid) {
const $this = $(grid);
const imgLoaded = imagesLoaded($this);
imgLoaded.on('always', function(instance) {
setTimeout(() => {
$this.colcade({
columns: '[data-masonry="col"]',
items: '[data-masonry="item"]'
});
$this.addClass('loaded');
}, 300);
});
}
It creates a grid and all is well for the moment. Then, upon pressing any of my filters, I change the "data-masonry" attribute of the unnecessary items to "none" and for the required items - to "item", and rerun the initializeGrid()
function. But Colcade somehow ignores that the attributes have changed and continues to use all items that initially had data-masonry="item"
, despite the attribute being changed before rerunning the initialization function.
I found a solution to my problem above.
What I have been doing before:
- Initializing colcade only with items that have the
data-masonry="item"
attribute. - Upon pressing the filter button, I used
$grid.colcade('destroy')
; - After destroying the grid, I changed the
data-masonry
attribute of the unneeded items tonone
. - Then I called my
initializeGrid()
function to rebuild the grid using only thedata-masonry="item"
items.
What I should have done:
In step 4, instead of using my initializeGrid()
function, I should have called $grid.colcade('reload')
(which, by the way, I couldn't find in the documentation).
Hopefully, this will be helpful to somebody.