Layout options – including Horizontal and Off canvas filter

Anonymous

#247306

I’ve set up a Case Study filter, as described in https://support.searchandfilter.com/forums/topic/speed-considerations-your-advice-please/

See here: https://d.xmarksthespot.co.uk/treasure-hunt-case-studies/ for the page. There are 3 versions of the same filter as I’m experimenting with various placement options.

My goal is to save screen space. On desktop/tablet the filter could go in a toggle (this isn’t ideal for the user but I’ve got it working) or (preferably) stay in the main body, but be horizontal instead of vertical. I’ve got the vertical version working.

*Is there an easy way to get a horizontal version?* (I saw a previous thread in Support, but didn’t quite understand and some of the replies were private from recollection). I plan to use vertical layout in a sidebar on a Woocommerce filter – if that’s relevant.

Another option is a sidebar for desktop/tablet – especially if/when filter choices expand. I’ve got this working too.

My preferred option is an off-canvas sidebar across all devices. Is this something that can be done as of now?

If not, I think I read in a Support thread that this may be considered in v3. Any firmer timescales yet?

Looking forward to your reply.

Trevor

#247398

As with all coding, release dates for new versions need to be somewhat flexible. I am thinking at least 4-5 weeks away right now for V3.

The main issue that you will face is that, at present, a form should be placed only once on a given page. Thus, placement is fixed by this. CSS can vary according to screen width, which can be dealt with using CSS media queries.

There is no reason why the form cannot be in an off canvas element. It should work fine (and I have seen other users do this OK).

Our form is relatively unstyled, so it is for the designer to add CSS to suit. Some basic CSS is shown in this page:

https://searchandfilter.com/documentation/getting-started/display-search-form/

Anonymous

#247463

Hi Trevor, noted on the styling etc. Thanks.

I removed the two search forms on the Case Studies page that were working correctly. Now only the search form (Case Study Filter) on the off canvas form bar remains. (It is accessed via the yellow Filter button).

It is still not working.

Display Results Method: Elementor Posts
Results URL: https://d.xmarksthespot.co.uk/treasure-hunt-case-studies
Case Studies page/Edit posts/search & filter query = Case Study Filter

Can you help please?

Trevor

#247593

This reply has been marked as private.

Anonymous

#247614

This reply has been marked as private.

Trevor

#247707

This reply has been marked as private.

Anonymous

#247714

This reply has been marked as private.

Ross Moderator

#247780

This reply has been marked as private.

Anonymous

#247795

This reply has been marked as private.

Ross Moderator

#247959

This reply has been marked as private.

[Author]

Posts