Skip Navigation

Filter conflict between desktop and mobile versions

This support ticket is created 2 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 1 reply, has 1 voice.

Last updated by nelsonT-2 2 years, 6 months ago.



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 class="mobile">
[wpv-control-post-taxonomy taxonomy="bpi_rubrique" type="multi-select" url_param="wpv-bpi_rubrique"]

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...?