Hi,
As explained in this video: hidden link
I'm trying to have a different view on desktop and tablet than on mobile, because I have about 30+ checkboxes...
So, I duplicated my taxonomy filter and use checkboxes on desktop and tablets, and multi-select on mobile. It works perferctly for the UI, but as you can see in the video, doing multiple searches keep the previous element activated...
After I did the video, I did some other testings and I found out that the hidden (via CSS) element was still interfering with the visible one, hence causing this issue... It's a little strange, since it's hidden, but anyway...
Is there a way I could make these work together?
Here's a part of my current code:
<div class="form-group">
<label for="wpv-bpi_rubrique">[wpml-string context="wpv-views"]Rubriques PI[/wpml-string]</label>
<div class="columns" style="display: none;">
[wpv-control-post-taxonomy taxonomy="bpi_rubrique" type="checkboxes" url_param="wpv-bpi_rubrique"]
</div>
<div class="mobile">
[wpv-control-post-taxonomy taxonomy="bpi_rubrique" type="multi-select" url_param="wpv-bpi_rubrique"]
</div>
</div>
I just tried to change the url_param for the second one, but it makes things even worst: not only are they still ckecked, but the filter is not applied anymore... Is there any solution to that?
I was able to find a way to make it work by disabling the other elements using jQuery:
jQuery(function() {
let isMobile = window.matchMedia("only screen and (max-width: 767px)").matches;
if (isMobile) {
jQuery('.form-group .columns .checkbox input').attr("disabled", "disabled");
} else {
jQuery('.form-group .mobile select').attr("disabled", "disabled");
}
});
Unless you have a better solution...?
