Search Results for 'horizontal'

[Anonymous]

Hi,

i have created a search bar, but couldnt find a way to make it horizontal.

I would like to display the search bar below my menu bar, horizontally, can advice how i can do that?

web:
http://vallinamgallery.com/web/

[Trevor]

You would need to use Custom CSS. There are many code snippets in the forum (found by searching for horizontal CSS, but this is what I normally start with:

.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]

You would need to use Custom Css. There are many code snippets in the forum (found by searching for horizontal CSS, but this is what I normally start with:

.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]

If by that you mean styling, you would need to create Custom CSS. There are many snippets on various posts, so it depends what you need to do. For example, searching for horizontal css would most likely give you snippets that might work for you.

[Trevor]

Making the search bar horizontal will require some custom CSS. The precise CSS required will depend on the style you need to match your theme. I can give you general pointers in how this is done, be referring to code snippets on this forum. You can search for horizontal CSS, but this is the typical base CSS required:

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

As to the appearance of results, are you able to send me a live link/URL to your search page so I can take a look?

[Trevor]

There isn’t an option, it would need custom css (but I have posted snippets before for other users to use (just search for horizontal css on the forum). What I was saying is that sometimes requires tweaking for mobiles.

[Trevor]

I understand. as I said before, it will require an additional Custom field for the single letter. Then, in the form, Use a Post meta field object for that new field, set as a checkbox. In the options set it to Manual populate the control, and add manually all the alphabet, and use the All Label for the A-Z first choice.

Then you use custom css to hide the checkboxes and show just the labels, and custom css to make the boxed effect. Custom CSS can also have them all horizontal.

[Trevor]

That horizontal search bar is from your theme or another plugin.

The header search and this extra one both had the same start to their ID’s:

id="header-form-search....

Where the bit following is a random sequence of characters. It looks like they are being inserted with javascript.

You need to identify what javascript file is doing this, and who the author is, and then find out how to disable it.

[Trevor]

Hi

Q1. Is there any way to show the total result count of the actual search in the S&F widget?
A1. If you mean in the same space as the form, not easily. If you had this count in the result block on the page (and that would be dependent on your results template), you could use javascript to copy this value to another part of the page. But you would need to hire a third party coder to do that.

Q2. How can I format the checkboxes horizontal?
A2. Most formatting of the forms needs to be done using custom CSS. There are code snippets in answers on the forum, such as this:

.searchandfilter ul > li > ul:not(.children) {
  padding-left: 0;
}
.searchandfilter > ul > li > ul > li {
  display: inline-block;
}
.searchandfilter  > ul > li > ul > li .sf-label-checkbox {
  margin-right: 20px;
}

Q3. In your Movie demo is the “Genre checkbox-area” reduced (scrollable) – how is it done?
A3. There are many ways that you can do this, including some quite pretty scrollbars using jQuery, but in this case a simple piece of custom CSS:

.searchandfilter > ul > li[data-sf-field-input-type="checkbox"] > ul, .searchandfilter > ul > li[data-sf-field-input-type="radio"] > ul {
  max-height: 150px;
  overflow: auto;
}

Note that this will affect all checkbox and radio button groups in your form.

[Trevor]

I think you are wanting to make the fields in the search form (or at least some of them) work horizontally. The actual CSS required would vary from form to form and theme to theme, but if you search for the phrase:

horizontal form custom css you will find many examples on this forum.

You appear to be using the Shortcode Display results method and the guide to customising the results.php template is here.