Skip Navigation

[Gelöst] Filter conflict between desktop and mobile versions

This support ticket is created vor 3 Jahre, 12 Monate. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

This topic contains 1 Antwort, has 1 Stimme.

Last updated by nelsonT-2 vor 3 Jahre, 12 Monate.

Author
Artikel
#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...?

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.