Search Results for '.searchandfilter custom css'

[Trevor]

It would need to be done with Custom CSS, like this:

.wpb_text_column .searchandfilter ul li:before {
  display: none;
}
.wpb_text_column .searchandfilter ul li ul {
  padding-bottom: 5px;
  padding-left: 0px;
  padding-top: 5px;
}
.searchandfilter > ul > li {
  display: inline-block;
  vertical-align: top;
  padding: 0 20px;
}
.searchandfilter > ul > li.sf-field-category ul,
.searchandfilter > ul > li.sf-field-tag ul {
  columns: 2
}
.searchandfilter li[data-sf-field-input-type=checkbox] label {
  margin-right: 20px;
}
.searchandfilter > ul > li.sf-field-search {
  display: block;
}
.searchandfilter > ul > li.sf-field-search label {
  width: 100%
}
.searchandfilter > ul > li.sf-field-search label input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px
}

[Trevor]

Do you have a realisation of what it needs to look like?

I can see your form needs at least this custom CSS, I think:

.page_decoration .searchandfilter ul li:before {
  display: none;
}
.searchandfilter > ul > li > ul > li {
  margin-bottom: -20px;
}
.searchandfilter li[data-sf-field-input-type=checkbox] label, .searchandfilter li[data-sf-field-input-type=radio] label, .searchandfilter li[data-sf-field-input-type=range-radio] label, .searchandfilter li[data-sf-field-input-type=range-checkbox] label {
  top: -20px;
  position: relative;
}

… to remove the ‘dots’ and align things nicer.

[Trevor]

Try this custom CSS:

.searchandfilter > ul > li,
.searchandfilter > ul > li > label,
.searchandfilter .select2-container,
.searchandfilter .select2-container--default .select2-selection--multiple {
	min-width: 250px;
}

Or whatever width you need.

[Trevor]

You would need custom CSS to do this. This thread (making an A-Z selector) does much the same, so you may be able to use the code (re-factored to your needs):

https://support.searchandfilter.com/forums/topic/a-to-z-filter/

[Trevor]

Do you mean the genres field?

It uses 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;
}

[Trevor]

The styling of select2 controls in our plugin is done via CSS, see this post:

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345

As to the coding, I am sorry, I have no suggestions to make in that regard.

[Trevor]

You have this custom CSS:

.searchandfilter ul li {
    list-style: none;
    display: inline-table;
    padding: 1px;
    margin: 4px;
}

Change this to this:

.searchandfilter ul li {
    list-style: none;
    display: inline-block;
    padding: 1px;
    margin: 4px;
    float: left;
}
.searchandfilter .sf-field-reset {
    clear: both;
}
.searchandfilter > ul {
    display: table;
    margin: 0 auto;
}

[Trevor]

Can you see if this custom CSS works:

.searchandfilter .sf-option-active ul.children {
    display: block;
}
.searchandfilter ul.children {
    display: none;
}

[Trevor]

We do not, as every theme and site needs different style, so what it looks like out of the box is intentionally basic and often will inherit theme CSS. This search will find some snippets:

https://support.searchandfilter.com/forums/search/.searchandfilter+custom+css/

If you show me what you have, and what you want, I can guide you (preferably live examples).

[Trevor]

This is being caused by your theme CSS. This custom CSS should fix it:

#dslc-module-a7b99d54515 .searchandfilter select {
  padding-top: 0;
  padding-bottom: 0;
}