AnonymousInactive
To clairfy: I want all of the entries in each taxonomy to display horizontal in a row, not a collection of vertical lists side by side as the provided snippet enables.
In reply to post-259381
We don’t currently have such a range option (e.g. <=5) so you must make it a range, and hide the From box in the form using CSS, and set the From number to not auto detect but set it to 0 manually. The user can then select the upper number.
Horizontal forms you may need to enclose the custom CSS in a media query so as not to affect mobile view, but a simple method is shown here:
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
AnonymousInactive
Hello We have filter page where we set to display 9 results per page: https://prnt.sc/uhoxa1. Also, we have set correct filter in post settings of actual page: https://prnt.sc/uhoxpc. But it shows more than 9 (it shows 11) when someone visits page first time.
What settings we are missing here or did we set something wrong here?
URL: https://surreyplacst.wpengine.com/filter-horizontal/
Regards.
AnonymousInactive
Hello There,
1) We want to add some icon in placeholder text for input box and button text: https://prnt.sc/uhoqmf. The example : https://prnt.sc/uhos0b
2) Also, We want to add some spacing after arrow in select field. how can we achieve that ? : https://prnt.sc/uhot3g
URL to Review: https://surreyplacst.wpengine.com/filter-horizontal/
AnonymousInactive
Also, on mobile, almost an inch and a half on left side of the search form seems to get cut off. It only displays fully when the screen is flipped horizontally – is this fixable?
AnonymousInactive
Hi Support Team Member,
I want to bring the search and filter (in the side bar in the desktop view) on top of the mobile view. But I fail to do it.
Here is the link to the page: https://gradhopper.com/university-and-scholarship-finder/
Further, it does not show search option when the mobile is placed in vertical position. It only show the search option when the mobile placed horizontally. So I would like to bring the search option on top of the mobile view before showing the woocommerce products.
Note that we can remove all the other content in the side bar if those cause some issues. But the behavior is same even before I added those content to the side bar.
Highly Appreciate your help.
Thanks,
Madushan
AnonymousInactive
The URL is https://ci.ioe.ac.uk/mandarin-resources-for-schools/
1. If you check one of the category boxes, it will refresh the page and you will see the filtered posts by category but the search form will disappear and it won’t even allow you to go back to the previous page (the one with the form on it). E.g. when I tick the Qualifications check box it redirects me to this page https://ci.ioe.ac.uk/mandarin-resources-for-schools/?_sft_mars_category=qualification where there is no form displayed and it won’t let me go back to the previous page either (back button doesn’t seem to be working). Hope this makes sense?
2. As you can see I have managed to get the form horizontal with the help of the custom CSS plugin however it is not as neat as I’d like it to be. All the checkboxes aren’t perfectly aligned with their respective category and they are all kind of squashed together – I need to space them apart a bit.
Thanks very much,
Meher
AnonymousInactive
Thanks Trevor, removing the <pre></pre>
sorted it.
I have 2 questions now.
1) When I search something on the search form it takes me to the results page but the results page doesn’t have the search form at the top and when I go back through back arrow it doesn’t display the search page. How can I fix that?
2) Is there a way for me to have the categories display horizontally in rows when the form is displayed horizontally? Right now the check list runs all the way down the middle of the page.
AnonymousInactive
Hi,
How can I make the Search bar horizontal?
Best,
Mie
Change the CSS you used to make it horizontal to this:
@media only screen and (min-width: 815px) {
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0px 40px 0px 0px;
}
}