Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

display property not work #4

Open
kavan-mevada opened this issue Aug 7, 2016 · 3 comments
Open

display property not work #4

kavan-mevada opened this issue Aug 7, 2016 · 3 comments
Labels

Comments

@kavan-mevada
Copy link

when I try display:none on element it still include it in layout
Its need when using colcade with filter layout ...

@desandro desandro added the bug label Aug 7, 2016
@desandro
Copy link
Owner

desandro commented Aug 7, 2016

Thanks for reporting this bug. I'll have to take a look.

@andrey-scada
Copy link

andrey-scada commented Feb 19, 2021

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.

@andrey-scada
Copy link

I found a solution to my problem above.

What I have been doing before:

  1. Initializing colcade only with items that have the data-masonry="item" attribute.
  2. Upon pressing the filter button, I used $grid.colcade('destroy');
  3. After destroying the grid, I changed the data-masonry attribute of the unneeded items to none.
  4. Then I called my initializeGrid() function to rebuild the grid using only the data-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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants