Skip Navigation

[Resolved] Filter conflict between desktop and mobile versions

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.

Our next available supporter will start replying to tickets in about 5.79 hours from now. Thank you for your understanding.

This topic contains 1 reply, has 1 voice.

Last updated by nelsonT-2 1 year, 8 months ago.

Author
Posts
#1571031

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?

#1571085

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