Search Results for 'horizontal'

[Anonymous]

Thank you Trevor, but all my questions was about the horizontal scroll bar “Oscars Won”. Mabe scroll bar is an inapropriate word, sorry.
For “Orario limite di arrivo” I would like no check boxes and replace it with an horizontal scroll bar like “Oscars Won”.
Thank you

[Anonymous]

It’s working perfectly! Thank you!
I also styled the checkboxes so they are horizontal, so everything looks and works exactly as I pictured in my mind.

THANK YOU SO MUCH!! 🙂

[Anonymous]

Firstly, thanks for the effort and time you put in creating this.
I’m not a CSS guru by any means, but if it is possible here is what I’m looking for.
1. 1px colored border around drop down fields.
2. 1px colored border around search field
3. Background color of drop down fields
4. Background color of search field
5. Color of background and text of submit button.
6. Horizontal layout but left aligned so it looks cleaner.
7. Search field on top making it a total of 3 rows (Responsive in mobile environment).
I’ve added an image of something I’m trying to accomplish. I’m not an artist 🙂 Colors aren’t final, but once I have the CSS in hand I can change.
This site is not operational (and I know you require access to it, so I’ll place a private message afterwards with credentials to the site as well as the address to the form in question.
Thanks a bunch for your time.

[Anonymous]

Thanks for reply!
Yes!! I’m using W3TC with minifications disabled.

I have discovered this difference in frontend: if W3TC is enabled, the element div.meta-slider is empty:
<div class=”meta-slider”></div>

If W3TC is disabled, the element div.meta-slider is this:
<div class=”meta-slider noUi-target noUi-ltr noUi-horizontal”>
<div class=”noUi-base”>
<div class=”noUi-connects”>
<div class=”noUi-connect” style=”transform: translate(0%, 0px) scale(1, 1);”></div>
</div>
<div class=”noUi-origin” style=”transform: translate(-100%, 0px); z-index: 5;”><div class=”noUi-handle noUi-handle-lower” data-handle=”0″ tabindex=”0″ role=”slider” aria-orientation=”horizontal” aria-valuemin=”0.0″ aria-valuemax=”100.0″ aria-valuenow=”0.0″ aria-valuetext=”0″></div>
</div>
<div class=”noUi-origin” style=”transform: translate(0%, 0px); z-index: 4;”><div class=”noUi-handle noUi-handle-upper” data-handle=”1″ tabindex=”0″ role=”slider” aria-orientation=”horizontal” aria-valuemin=”0.0″ aria-valuemax=”100.0″ aria-valuenow=”100.0″ aria-valuetext=”1.000″></div>
</div>
</div>
</div>

So, I suppose the promblem is on a JS files.
I’ll try to exclude search-filter-build.min.js from minification.

[Anonymous]

Hi there

I have a search form with 6 search fields. Using the .css provided in your documentation, I’ve managed to make the form display horizontally so that the fields are now displayed in 2 rows of 3 but it all still looks a bit messy so ideally I’d either like to –

Evenly space the fields in 3 columns across the width of the form (ie. so that field 4 lines up underneath field 1, field 5 underneath field 2 etc)

OR

Centre each row of 3 across the width of the form (currently they seem to be left aligned) ie. fields below wouldn’t necessarily align with those above but would at least look a little neater if each row is centred

I suspect I may need to target each field separately to achieve this but do you have any suggestions as to how to approach? I’ve searched through as many of the support forum threads as I can find and can’t seem to find this particular scenario mentioned.

Unfortunately I can’t give a link as the site is not yet live but hopefully the above at least makes some sense.

With many thanks in advance.

[Trevor]

Ah. It is not form fields that you want to make horizontal, as you have only one field. You want to make the terms run horizontally within the category field.

You may need to remove what you had used, and use this:

.searchandfilter .sf-field-category > ul > li {
  display: inline-block;
  margin-right: 20px;
}
.searchandfilter ul {
  margin: 0;
}

[Trevor]

This is the basic code that should be used, per the documentation here:

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

.searchandfilter > ul > li {
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;
}

[Anonymous]

I am not an expert in wordpress, I am learning.
could you help me put the Search & Filter Pro horizontally, I don’t want it vertically, I want to put it in the middle of the worpress page.
please help me I’ve been trying for more than three days … with a free version.

I want this data for Search & Filter Pro:

Category, Title, Author, Sort By desc / asc, initial ardem

This would be the form I would like to have, I beg you if you can help me put it in my worpress,

thank you

[Anonymous]

Hello,
I’ve been searching here for the proper css code to make hierarchical checkboxes (together with children) horizontal. I need to display on my search page all taxonomy terms (including parents and children), but I dont want them to be indented under each other (children display below parent). I want to display all the terms in the inline block, so that parent is horizontally followed with children. Is that possible to achieve?

[Trevor]

Responsiveness is handled with CSS media queries.

Do you have a breakpoint for mobile? Let’s say mobile is 600px and less, and desktop is 601px and more, then the code I gave you would become:

@media only screen and (min-width: 601px) {
  #search-filter-form-587 {
    display: table;
    margin: 0 auto;
  }
}

Similarly, inside that you could put the code you already used to make the form horizontal.

Then, by default, on mobile the form would become vertical and not centered.