Search Results for '.searchandfilter custom css'

[Trevor]

To set the form fields horizontally, you need to use custom CSS, like this:

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

In the meantime, to set the form fields horizontally, you need to use custom CSS, like this:

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

To set the form fields horizontally, you need to use custom CSS, like this:

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

oooh. That plugin has some badly (not very targetted) CSS. I have fixed the Custom CSS I wrote to this:

.wpt_widget_content .tab-content .searchandfilter ul li.sf-field-reset {
  width: 75px;
  display: inline-block;
  margin-right: 50px;
}
.wpt_widget_content .tab-content .searchandfilter ul li.sf-field-submit {
  width: 75px;
  display: inline-block;
}
.wpt_widget_content .tab-content .searchandfilter ul li.sf-field-reset input, .wpt_widget_content .tab-content .searchandfilter ul li.sf-field-submit input {
  width: 75px;
  background: #666;
  color: #fff;
}
.searchandfilter > ul > li select {
  width: 200px;
}
/* the next is 200px-(2*12px padding) - (2*1px border) */
.searchandfilter ul li.sf-field-search input {
  width: 174px;
}

[Trevor]

For the form, the Custom CSS you are looking for would be this:

.searchandfilter ul li.sf-field-reset {
  display: inline-block;
  margin-right: 50px;
}
.searchandfilter ul li.sf-field-submit {
  display: inline-block;
}
.searchandfilter ul li.sf-field-reset input, .searchandfilter ul li.sf-field-submit input {
  width: 75px;
  background: #666;
  color: #fff;
}
.searchandfilter > ul > li select {
  width: 200px;
}
/* the next is 200px-(2*12px padding) - (2*1px border) */
.searchandfilter ul li.sf-field-search input {
  width: 174px;
}

I already added that in the WordPress Customiser for you.

[Trevor]

I cannot see any Custom CSS attached to them, so you must have removed it? I checked my notes from last year (lucky I still have them) and this was the CSS I gave you, which seems to work:

.searchandfilter ul {
  display: table !important;
  margin: 0 auto !important;
}
.searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
}

Make sure you add it using a method that does not get written over on a theme or plugin update.

[Trevor]

The display of results is typically handled by the theme (or page builder plugin) templates, unless you are using the shortcode method (which only displays the results singly per row).

To set the form fields horizontally, you need to use custom CSS, like this:

.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

Did you see this thread:

https://support.searchandfilter.com/forums/topic/grid-view-using-betheme/

(ignore the private posts).

I looked at the compromisos page, but do not see the page builder adding the grid? Maybe I missed it?

I am also not sure what is meant by this:

I’ve added in Theme Options/CSS:

<?php echo do_shortcode('[searchandfilter id="157"]'); ?>

This is the same as adding the widget for the form. With your theme, you need to place a grid for the posts/results, and before that place the filter_next_query shortcode (with the form settings as you have them set to Custom). The Ajax Container will need to be determined after you get this working (I would test with Ajax off for now).

[Trevor]

To get the filters to sit horizontally, you will need some custom CSS, like this:

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

Are you filtering Posts, or a Custom Post Type?

[Trevor]

Try adding this your theme custom CSS:

.searchandfilter select.sf-input-select {
    max-width: 100%;
}