Search Results for 'horizontal'

[Trevor]

So, I had to experiment a bit. By way of an explanation for others, in the browser inspector, I manually added this HTML inside the body tag, at the end of the page:

<div class="search-filter-scroll-loading"></div>

This is what our javascript does when the infinite scroll is loading. Then it was a case of finding the CSS, which I had already shown was this:

.search-filter-scroll-loading {
    display: block;
    margin: 20px 10px 10px;
    height: 30px;
    width: 30px;
    animation: search-filter-loader-rotate .7s infinite linear;
    border: 5px solid rgba(0,0,0,.15);
        border-right-color: rgba(0, 0, 0, 0.15);
    border-right-color: rgba(0,0,0,.6);
    border-radius: 50%;
}

Then I had to find a way to move the icon. Making it position: absolute; means that it will always appear towards the top of the page, and so out of view when the page has been scrolled down. Making it position: relative is OK, but I do not know where exactly on the page our javascript places it. So, the extra CSS might be:

.search-filter-scroll-loading {
  z-index: 99999999;
  left: 50%;
  top: 100%;
  position: relative;
}

This puts it in the middle of the page horizontally, but you will have to play with these numbers (left and top).

[Anonymous]

Hi Trevor,
thank you so much!! it works like charm!
another small question: is there simple way to display the values horizontally instead of vertically?
or only css?
many thanks!
nils

[Anonymous]

Hi Trevor,

I would like your help. I´ve just add the code to my css editor to display my search box horizontally. However, the main picture of my the website is not fine anymore. Take a look on this picture please http://prntscr.com/g03id1. So, I´ve just need to readapt the main pucture (all woman) to go just down on the search box.

The code I added is the described below.

Thank you so much

.searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.search-filter-results {clear: both;}

[Trevor]

Hi

You appear to have the fields horizontally, but this is achieved through Custom CSS that you would write. Some snippets are here on the forum, use this search phrase:

horizontal custom css

To open and close (like an accordion menu), you would need to find someone to write some custom javascript for you, or find an example/snippet you can use on StackExchange. I am aware some other users have done this, but they have not pasted their code here for others to see.

[Trevor]

At this time, this is not possible, but should be in the next major release, V3.

If you search this forum for:

horizontal custom css

You will find some css snippets to style the form horizontally.

[Anonymous]

Hi Trevor,

The site I am building is based on a bootstrap theme and uses Search and Filter Pro on the home page.
I would like to change the layout of the search form by inserting bootstrap classes into the form HTML. You can see the site at cards.lightseekers.com

Specifically I would like to change the lines:
<li class=”sf-field-post-meta-card_rarity” data-sf-field-name=”_sfm_card_rarity” data-sf-field-type=”post_meta” data-sf-field-input-type=”checkbox” data-sf-meta-type=”choice”>

to:
<li class=”sf-field-post-meta-card_rarity col-sm-4″ data-sf-field-name=”_sfm_card_rarity” data-sf-field-type=”post_meta” data-sf-field-input-type=”checkbox” data-sf-meta-type=”choice”>

So that I can change the form layout to be horizontal rather than vertical.
Is there any way to achieve this?

Many thanks,
Greg

[Anonymous]

Hi Trevor,

Thanks for the reply — I will follow the instructions here to see if I can get it working.

Can I ask that we keep this open so that I can reply if I battle in which case I would very much appreciate it if you can take a look.

I have managed to get the CSS for horizontal display working and style the search form as required, so that is working properly 🙂

Kind regards
Francois

[Trevor]

I just replied to another of your threads, but here you give me some more information, so I can first direct you to this post:

https://support.searchandfilter.com/forums/topic/divi-blog-module-grid/#post-99184

Note that the Ajax container will vary according to whether you use a grid or a list view.

Secondly, as to the CSS, you would have to add Custom CSS to style the search form itself. If you search for the key words horizontal CSS you will find some snippets on this forum, but I can help with fine tuning it. All I would need are olive pages with what you have and what you want to to resemble.

[Trevor]

Can you add this to your Custom CSS:

.meta-slider.noUi-target.noUi-rtl.noUi-horizontal.noUi-background {
direction: ltr !important;
}

[Anonymous]

Hello
Every thing was OK with the plugin and I realised today that there is a problem with my search box (due to update?): the 3 boxes of search (Votre DESTINATION, Hébergement à THÈME, TYPE d’hébergement) are no more horizontal but vertical as you can see on the page http://www.enfant-en-voyage.com/. How to put them as before?
And on the others pages, in the sidebar there was a picture on the backgound of the searchox, the same picture that is on the homepage, but the picture has disapeared.
Thanks for help
Best regards
Géraldine