if you scroll down to 'Software Categories' and click on an item in the mixitup list (e.g Payroll) you will notice that all the items disappear. It only seems to happen when 'All' is selected. When any other category is select the items do not disappear. Any ideas on how I can stop the categories from disappearing? It also happens when you click on the 'View Details' button in the section just above ('The Software').
It looks like something is going on to where all categories are becoming unselected when the modal is opened up. The .mixitup-control-active class gets removed when the modal is toggled opened. I am thinking that this is a conflict between the Bootstrap default modal behavior and the plugin. I also see that clicking on the portfolio item adds the .mixitup-control-active class to the portfolio item, but it's not a control item. I'm not completely sure how to solve this though. I will do some digging. This is what is physically happening though!
Let me know if this works. I did some testing on my end and it was working locally. If it doesn't I might need to get a copy of your HTML file so I can test it using the code before it gets rendered.
If you scroll down to 'Software […]
if you scroll down to 'Software Categories' and click on an item in the mixitup list (e.g Payroll) you will notice that all the items disappear. It only seems to happen when 'All' is selected. When any other category is select the items do not disappear. Any ideas on how I can stop the categories from disappearing? It also happens when you click on the 'View Details' button in the section just above ('The Software').
// Mixitup Settings
var containerEl = document.querySelector('#portfolioList');
var mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
}
});
Then add the data attribute data-mixitup-control to each of your control buttons, so for example:
<button type="button" class="control btn btn-secondary btn-sm mx-2 mb-4" data-filter=".financial">Financial</button>
Changes to
<button type="button" class="control btn btn-secondary btn-sm mx-2 mb-4" data-mixitup-control data-filter=".financial">Financial</button>
Let me know if this works. I did some testing on my end and it was working locally. If it doesn't I might need to get a copy of your HTML file so I can test it using the code before it gets rendered.