Search Results for 'horizontal'

[Anonymous]

Well, now I coded the search filter as the plugin is not able to solve my issue (the reason of this thread). I did change the code of submit.php to add Elementor code for styling the submit button.
I would probably edit the range slider to add extra classes to better style the labels and the prefix text as I can’t for example say From [value field] – to [value] because there is only one prefix field in the Range filter.

The plugin looks promising. I hope you’ll add more options to it and many more classes, so we can style it more. Also, I hope you’ll add an option to have a horizontal layout. Let’s see v3!

And thank you for your quick replies Trevor!

[Anonymous]

Hi,
the serach&filter function is great while the styling of the filters lacks usability & valueable options!

I have multiple filters horizontal filter set up (1) in one search form, acf group fields in place and no nested taxonomies (2) and try to place them via (3) and use the searchform via shortcode inside elemtor pro.

Given I check “Hide empty items?” in searchfilter Admin settings, then in the front-end after each filter change all filters “jump” around (accordingly to the fact, that option are lower) => this makes them uncontrolable with regards to styling.
=> unhide empty items would fix the jumping but will be an ux mess (& not the intention)
Question:
– Is there a way to have the items “hide empty items” checked (not shown in the filter option) but also have the length of the filter field fixed?

Feedback appreciated
Thanks in advance
Onur

btw:
Style of Combobox is nice – but as “date & price range&input fields” don’t have this option, their style won’t go together with the “combobox” – style of txonomy filters – is there a way to style the input fields accordingly?

btw2:
v3 will have fixes for some filter frontend styling lacks?

——-
(1)
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
————
(2) https://support.searchandfilter.com/forums/topic/multiple-categories-combination/#post-55166 – did all of that
————
(3)
.searchandfilter[data-sf-form-id=”1428″] .select2-container {
margin: 5px;
}
from: https://support.searchandfilter.com/forums/search/filter+style/

[Trevor]

See the CSS here:

https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal

[Anonymous]

Yes, exactly. It would be great if I could hide the checkbox, and just have the letters appear horizontally.

[Anonymous]

Hi Trevor,

Thank you for the quick response. I do an alphabetical sort already that is using custom taxonomies. Right now, I have it set up as a dropdown, and it works perfectly. However, I was asked to make it a horizontal list. I was hoping you might have a little advice on what the custom CSS might be to make it appear horizontally?

Thanks

[Anonymous]

I know this question has been asked many times before. I’ve tried to implement the solutions I’ve found and have been unable to get it to work. I’m using a child theme of Astra with WP Bakery. Everything is at the latest version.

On NovaScotiaFood.com I have a search form here. I want it to be horizontal.

I can get it to work in Inspector simply by going to the first li element and changing display to inline-block. But it doesn’t work when I input the CSS via Customizer. I have also tried adding it to my stylesheet via FTP. I am using Siteground Optimizer caching and Cloudflare. The SG cache has been cleared repeatedly and Cloudflare has been put in development mode. I have tried a hard refresh of the browser numerous times too (I’m in Chrome).

I’ve tried the following bits of CSS:

#search-filter-form-2018 > ul > li {
	list-style: none!important;
	display: inline-block!important;
	padding: 0 20px;
}

.searchandfilter[data-sf-form-id="2018"] {
	list-style: none!important;
	display: inline-block!important;
	padding: 0 20px;
}

.searchfilter ul li	{
	list-style: none!important;
	display: inline-block!important;
	padding: 0 20px;
}

None of these are working. Can you please help?

[Trevor]

Ah, OK. I would normally say set some CSS classes on the elementor container where you can specify whether the form in the container is to be vertical or horizontal and then precede the CSS with one or the other.

This was done in this thread also:

https://support.searchandfilter.com/forums/topic/search-form-customize-styling-2/

I will close this thread for now.

[Anonymous]

I have not been able to make 1 vertical and others horizontal. So I just decided to go with all vertical. This will be good for now.

Thanks so much!

[Trevor]

It is this CSS doing that:

.searchandfilter[data-sf-form-id="2839"] .sf-field-submit::before {
    content: "";
    display: block;
    height: 43px;
    width: 25px;
}
.searchandfilter[data-sf-form-id="2839"] .sf-field-reset::before {
    content: "";
    display: block;
    height: 43px;
    width: 25px;
}

You need to make that CSS conditional so it applies only to the horizontal form. For example, you could add a class to the Element in the Elementor widget settings and precede it with that on the horizontal version, so it then will not apply to the vertical version.

[Anonymous]

Finally managed all 3 forms to work!!!

One last thing. You mentioned you can make some of the vertical and others horizontal. I added the codes you gave me to make all of them horizontal. How can I make 1 of them vertical, on the page below?

https://creatorscycle.com/artist_grant/

Thank you.