CODEWITHSUNDEEP
javascriptjquery
Jess
Jess

Reputation: 63

Getting Cards to Sort to Top Left

I have a card layout here: http://jesseddy.com/resource-library. I'm using a jQuery plugin called Tagsort (https://wch.io/projects/tagsort) to filter the cards based on tags. Functionally it works but visually the cards are meant to stack on the top when filtered, that specific bit is not working.

To see it how it's meant to work see this: https://wch.io/static/tagsort/demo-stacks/index.html

Use mine to see it not working: http://jesseddy.com/resource-library (filter using more than one tag).

I think I've identified the issue is that I am using list items in my layout but I am not sure how to fix it. Thank you!

Upvotes: 1

Views: 41

Answers (1)

Yangshun Tay
Yangshun Tay

Reputation: 53169

The jQuery plugin only applies the display: none style to div.item because you initialized the plugin as such $('div.tags-container').tagSort({items: '.item', ... }) and only the DOM elements with the class item will be toggled. In your current version, the <li> elements are still present and take up space although the inner elements have been set to display: none.

You will have to change your markup and shift the class item and attribute data-item-tags to the <li> instead of the inner div.

Upvotes: 1

Related Questions