Search Results for 'horizontal'

[Anonymous]

5) is it possible to set 2 or more filters to be horizontal next to each other, aligned to the center of the block in Elementor? I tried to set the horizontality using CSS you recommend, but the Price range filter is narrower and not very useful. screenshot

6) how to turn on Scroll window to Top of Page (Window) on Pagination? I set it but after clicking on the next page it will not return to the top of the page. screenshot

[Trevor]

You would need to create your own CSS for the form, using CSS media queries to make the CSS responsive. For example, you can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme (change the 992px to suit). For example, like this:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="1234"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Where 1234 needs to be changed to match your form ID.

For more custom CSS examples, there are many snippets in the forum:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter

[Anonymous]

Hello,

How can I display the filter options horizontally?

Depending on categories, the filter options can take significant space on a page and I would like to display it horizontally on the top of a page on some pages. However, I don’t see an option to do that. Please help.

Thank you!

Best regards,
Natalia

[Trevor]

You would need to create your own CSS for the form, using CSS media queries to make the CSS responsive. For example, you can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme. For example, like this:

@media (min-width: 993px) {
  .searchandfilter[data-sf-form-id="4997"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

For more custom CSS examples, there are many snippets in the forum:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter

[Trevor]

Until V3, you can have a field only in the one type on the page. In V3 (due in a few months), you will be allowed to have the fields multiple times, to allow showing of different format fields responsively.

You would need to create your own CSS for the form, using CSS media queries to make the CSS responsive. For example, you can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme. For example, like this:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="1234"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Where 1234 needs to be changed to match your form ID.

For more custom CSS examples, there are many snippets in the forum:

https://support.searchandfilter.com/forums/search/data+form+sf+id+searchandfilter

[Anonymous]

the search form is not shown horizontal on mobile whereas the it.is. shown horizontal on desktop view.

My site is http://www.youngpio.com whereby you can see the search form on this URL.

[Anonymous]

Hi Trevor,

Website: https://www.CentralCoastWineCountry.com

I have been having a lot of trouble with the PRO version (and the Avada Theme) so I am back to using the Search & Filter Free version and I was wondering if you can help me with this. (And if there is a way to get this same fuctionality using the PRO version I would be happy yto go back to using that.)

If you look at the Website: https://www.CentralCoastWineCountry.com, to the left of the Portfolio (Post) Grid Pictures there are three dropdown buttons: Cities, Amenities, Wine Types. I want to be able to select any combinations from these three button to sort through the Posts.

When I select mutliple Cities it sorts great. But when I want to include some Amenities or Wine Types, as soon as I press the SUBMIT button, it refreshes the Cities fields. I would like to retain the Cities selection and combine it with the Amenetie Selection. How do I prevent this reset so that when I select some Ameneties it keeps the Cities selections too and sorts through both?

If you look at the HEADER there is a RED PLUS sign were a slider widget slides out. In this section I used ONE Search & Filter field (code below) and it functions fine. I can make mutiple selections from all three sections and it filters using all the selections. The button to the left of the Grid pictures I would like to use three seperate dropdown buttons to make the selections more manageable. (There are too many selections and it clutters the screen to dropdown all the selection feilds at once.)

The code that I am using for the three dropdown buttons to the right of the grid pictures is below. Also the code for the header slideout is below too.

Sincerely,
SM

PS: As you can see see in the Header Slide out I have been able to float all the filed horizontally. If I were to eventually go back to using the PRO version how do I get all the fields to float horizontally. It has been listing the fields stacked in a straight column down and this makes things unmanageable on the desktop and on a mobile phone platform.

Left Side Dropdown Buttons:

[fusion_toggle title=”Cities” open=”no”]
[searchandfilter fields=”,portfolio_category” types=”,checkbox” operators=”,OR” order_by=”,name” headings=”,Portfolio_Category” empty_search_url=”https://www.CentralCoastWineCountry.com” show_count=”,1″]
[/fusion_toggle]

[fusion_toggle title=”Amenities” open=”no]
[searchandfilter fields=”,portfolio_tags” types=”,checkbox” operators=”,AND” order_by=”,name” headings=”,wine” empty_search_url=”https://www.CentralCoastWineCountry.com” show_count=”,1″]
[/fusion_toggle]

[fusion_toggle title=”Wine Types” open=”no”]
[searchandfilter fields=”,portfolio_skills” types=”,checkbox” operators=”,AND” order_by=”,name” headings=”,Portfolio_Skills” empty_search_url=”https://www.CentralCoastWineCountry.com” show_count=”,1″]
[/fusion_toggle]

Header Slide out Code:

[searchandfilter fields=”search,portfolio_category,portfolio_tags,portfolio_skills” types=”,checkbox,checkbox,checkbox” operators=”,OR,AND,AND” order_by=”,name,name,name” headings=”search,cities,wine,amenities” all_items_labels=”,all,all,all” empty_search_url=”https://www.CentralCoastWineCountry.com” show_count=”,1,1,1″]

[Trevor]

The link you gave me comes back as IP address not found?

Did you use a copy of the form, or a different form, for the mobile view (as that is not allowed and will not work)?

You can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme. For example, like this:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="1234"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Where 1234 needs to be changed to match your form ID.

[Anonymous]

I would like the 3 different combo boxes to appear next to each other.

https://kasinoforum.com/casinos/

How do I change the styling?
Thanks

[Trevor]

For 1, you would have had to specify a template file to use.

You would need to be using a child theme. You copy that file to the child theme folder, and then edit it to add the PHP do_shortcode code as shown here:

<?php echo do_shortcode('[searchandfilter id="710"]'); ?>

You may also need to make the form horizontal, like this (change the px value to match your theme’s mobile/responsive breakpoint):

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="710"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

These are for guidance only. We do not include customising your theme and templates within the scope of support.

2. You wish to use the Shortcode method, but will need to create you own template. You still need to use our results.php template file, but customize it according to these instructions:

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

This is only a simple exemplar template, which uses the WordPress Codex structure and PHP.

So, what to do? You can replace almost anything you want in the file, but keep the if … else … endif and the while …. endwhile and transplant your own HTML, PHP and class names to replace our code. Do this slowly and test regularly, keeping backups at each stage.

The results.php template code will run inside your theme’s standard page template, in the content part, called by our results shortcode.

Again, we do not offer a coding service to do this, but it is fairly standard WordPress code, so you can often copy code from elsewhere in your theme.