Forums › Forums › Search & Filter Pro › Different Filter Settings For Desktop & Mobile

Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Anonymous
    (Private)  June 21, 2018 at 9:00 am #180922

    Is it possible to display the filter options differently depending on device?

    I’d like to use checkboxes in a sidebar on a desktop but on a mobile I’d like to display a check-multiple dropdown box directly above the results.

    At the moment I’ve set up 2 different Search-And-Filters (one set for desktop and one for mobile) then hide/display the filters & results using css depending on device. I have a “Read More” box for each result which toggles show/hide additional content for each result when clicked. Only problem is, the “Read More” button will only work on whichever result set is listed first in the page html. Seems like there’s a script conflict or something.

    Any help getting around this would be appreciated.

    Thanks,
    Mark.

    Anonymous
    (Private)  June 21, 2018 at 9:50 am #180923

    Quick update… The Read More toggle is pure CSS (As found at https://codepen.io/Idered/pen/AeBgF) so can’t be a script error.

    The page I’m using the Search & Filter on is http://www.our-pub.co.uk/tpg
    The Read More works on mobile (because the mobile filter results are listed first in the HTML) but not on desktop.

    Trevor
    (Private)  June 21, 2018 at 3:50 pm #180961

    Addressing your first query (Is it possible to display the filter options differently depending on device?) the answer is no, sort of.

    What happens (please try) if you add that field twice to the form, once as a checkbox and once as a combobox dropdown?

    You could use CSS to hide one or the other (if they both have the same name, you can target them child #). Maybe that would work?

    Anonymous
    (Private)  June 21, 2018 at 4:59 pm #180982

    Thanks, that seems to have worked.
    I’d thought about trying to hide an additional filter using CSS but the filters had the same class and no ID. Never thought about using the child selector.
    Just in case anyone else is looking for this…
    After adding a second Category filter, the CSS I used (or variants of to show/hide mobile/desktop elements) was…

    form#search-filter-form-[XXXXX] li.sf-field-category:nth-child(2) {
    display: none;
}

    Needed to specify the li class or it was hiding other filters further down the list too.

    Thanks again,
    Mark.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)