Search Results for 'data-sf-form-id .searchandfilter'

[Trevor]

Soemthing more like this then:

.searchandfilter[data-sf-form-id="2275"] > ul > li > ul > li {
    display: inline-block;
    margin-right: 15px;
}
.searchandfilter[data-sf-form-id="2275"] > ul > li > h4,
.searchandfilter[data-sf-form-id="2275"] > ul > li > ul {
    display: inline-block;
}
.searchandfilter[data-sf-form-id="2275"] > ul > li {
    display: inline-block;
    margin-right: 15px;
}

[Trevor]

Is this custom CSS what you need?

.searchandfilter[data-sf-form-id="2275"] > ul > li > ul > li {
    display: inline-block;
    margin-right: 15px;
}

[Trevor]

With the current version, what you want to do is not possible (have two forms that work together to filter the same posts listing on the same page as the filters).

#4. I am sorry, no. In V3 (due soon), we will make it possible to separate the fields of a form to place them where you want on the page, so, you would be able to split the form into two parts (or even more). I think that would meet your needs.

#1. Only some custom JavaScript will do as you want with the current version of the plugin, but, again, V3 should bring the option you want (to hide the field title when there are no terms to show).

#2. Some custom CSS will be needed, to set the options to display: inline-block, and also to have some margin between them (probably margin-right). See also #3:

.searchandfilter[data-sf-form-id="2325"] .sf-field-taxonomy-portfolio_category li {
    display: inline-block;
    margin-right: 15px;
}

#3. Either use custom CSS to hide the first option, or switch to checkboxes (which do not have the ‘all’ option). The problem with hiding the first option on a radio button list is that, after you have made a selection, you cannot deselect it without selecting another option (i.e. cannot have none selected). My advice would be to switch to checkboxes.

#5. I am not sure what you mean? Do you mean to make the text labels be the filters, like a tag cloud? If so, that is possible with some custom CSS, where the checkbox or radio button is hidden and the selected term highlights in some way when selected (text color or background color).

Please note that we are now into an extended public holiday weekend (Friday to Monday inclusive) here in the UK. We may be working for some of this period, but replies may be delayed at times.

[Trevor]

I might have used this CSS:

.searchandfilter[data-sf-form-id="289"] {
    display: table;
    margin: 0 auto
}
.searchandfilter[data-sf-form-id="289"] > ul {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    width: 100%;
}
.searchandfilter[data-sf-form-id="289"] > ul > li {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside:avoid;
  -moz-page-break-inside:avoid;
  page-break-inside: avoid;
}
.elementor-widget-container .searchandfilter[data-sf-form-id="289"] ul li {
  margin-bottom: 0;
}

To avoid the use of absolute, left and top in your css. Also, this should be restricted using a media query to desktop screen widths.

In V3 (due soon), we will allow you to place individual fields within your theme or page builder blocks or templates.

Please note that we are now into an extended public holiday weekend (Friday to Monday inclusive) here in the UK. We may be working for some of this period, but replies may be delayed at times.

[Trevor]

Could you first change the combobox script to Select2 (there is an option in our settings page to choose which Combobox script to use). Your current form uses Chosen, which is set within our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.

Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.

This custom CSS might then do it for you:

.searchandfilter[data-sf-form-id="9331"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="9331"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="9331"] .select2-container {
  min-width: 100%;
}

Please note that we are now into an extended public holiday weekend (Friday to Monday inclusive) here in the UK. We may be working for some of this period, but replies may be delayed at times.

[Trevor]

One thing that I think it needs is this:

.searchandfilter[data-sf-form-id="5236"] li.sf-field-taxonomy-product_cat > ul > li label:hover {
  cursor: pointer;
}

So, to your question. This:

.searchandfilter[data-sf-form-id="5236"] li.sf-field-taxonomy-product_cat .sf-input-checkbox:checked + .sf-label-checkbox {
color: #fff;
background: #960E12
}

Needs to be:

.searchandfilter[data-sf-form-id="5236"] li.sf-field-taxonomy-product_cat .sf-input-checkbox:checked + .sf-label-checkbox {
color: #fff;
background: #960E12;
line-height: 26px;
}

[Trevor]

I think it would be like this:

.searchandfilter[data-sf-form-id="13155"] .sf-field-taxonomy-partysize .select2-container {
  max-width: 150px;
}

[Trevor]

If these are what are known as category term archive pages, such as:

mywesbite.com/category/cat1/ or mywesbite.com/cat1/ (depending on how your permalinks are setup)

Then set the Display Results method to ‘Post Type Archive’, place the category field in the form, and then use custom CSS to hide it, maybe (where the ID number changes to match that of your form):

.searchandfilter[data-sf-form-id="1428"] .sf-field-category {
  display: none;
}

And then, on the General Settings tab, enable Auto Count (both settings) and also Auto Detect for Tags, Categories and Taxonomies.

Then, in the custom field and tag fields, set these to Hide Empty.

This assumes that you theme uses fairly standard PHP archive templates.

This method would mean you use one form that will change/adapt depending on the page it is on.

[Trevor]

If there is no other place to add custom CSS in your theme, then Customize – Additional CSS will suffice.

I think this is it then:

.searchandfilter[data-sf-form-id="2703"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="2703"] > ul > li:first-child {
  margin-left: 0;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search h4 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 3px;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] h4 {
  font-size: 16px;
  font-weight:600;
  color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] select,
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="2703"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: black;
  font-size: 14px;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="2703"] .select2-container {
  min-width: 100%;
}
.searchandfilter[data-sf-form-id="2703"] > ul {
  margin: 20px;
  border: 1px solid #02213d;
  padding: 15px;
  background: #f3f3f3;
}
.searchandfilter[data-sf-form-id="2703"] .meta-slider {
  max-width: calc(100% - 12px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider label  {
  width: calc(50% - 9px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider input {
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  color: #000;
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-selection,
.select2-container--open .select2-dropdown--above {
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container, .select2-container--open {
  font-size: 14px;
  color: #000;
}
.select2-container--open .select2-search--dropdown .select2-search__field {
  border-color: #02213d;
}

[Trevor]

With a Select Multiple box, 4 is the default that will show. You could use CSS to set the height of the select, but this can give variable results across browsers, but is easy to do, for example:

.searchandfilter[data-sf-form-id="1255"] .sf-field-category select {
    height: 200px;
}

The more difficult method is to use JavaScript to add a ‘size’ attribute to the select, where the number is the number of rows wanted.

Be aware that, if the actual number of terms available is insufficient, the control may have empty space.