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

[Trevor]

A number of issues there. Many of the elements of a form are styled by the browser and the operating system and are not affected by CSS.

As browsers go through regular updates, they change their styling of these things to suit latest ‘fashions’. I noticed recently that Chrome made such a change.

You have Elementor, but not Elementor Pro? I understand one is paid, so not everyone will use it.

If you are making custom CSS, you need to get the specificity correct, otherwise it will not override existing CSS. This means using the browser web developer inspector to see what current selectors in the CSS set a particular attribute, and using that with added specificity, usually like:

.searchandfilter[data-sf-form-id="1428"] .select2-container {
  margin: 5px;
}

So, I would need to see what you are trying to change (a live link/URL), and with what CSS.

Add New Note to this Reply

[Trevor]

I think this would do that for you:

.searchandfilter[data-sf-form-id="971"] > ul > li.sf-field-submit,
.searchandfilter[data-sf-form-id="971"] > ul > li.sf-field-reset {
  min-width: auto;
}

Add New Note to this Reply

[Trevor]

You will need to use custom CSS, such as:

.searchandfilter[data-sf-form-id="8759"] ul {
  padding: 0;
}
.searchandfilter[data-sf-form-id="8759"] > ul {
  padding: 20px;
}
.searchandfilter[data-sf-form-id="8759"] .sf-date-prefix {
  min-width: 45px;
}
.searchandfilter[data-sf-form-id="8759"] h4 {
  color: green;
  /* font-size: 24px; */
  /* font-weight: 700; */
}

I have commented out two lines, to show how to change font size and weight. You could also change font here. This will give you some ideas I think, but if you need more help, can you tell me what specifically needs to change and to what?

The fonts are all inherited from your theme.

Add New Note to this Reply

[Trevor]

Remove this custom CSS you already used:

.searchandfilter > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
}

Replace that with this custom CSS:

@media (min-width: 768px) {
  .searchandfilter[data-sf-form-id="36"] .sf-field-reset:before {
    content: "";
    display: block;
    height: 12px;
  }
  .searchandfilter[data-sf-form-id="36"] > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 0 0;
  }
  .searchandfilter[data-sf-form-id="36"] > ul > li:last-child {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .searchandfilter[data-sf-form-id="36"] li {
    text-align: center;
  }
  .searchandfilter[data-sf-form-id="36"] > ul > li {
    padding: 0;
  }
  .searchandfilter[data-sf-form-id="36"] .sf-field-reset {
    padding-top: 11px;
  }
}

You may need to adjust the numbers slightly to meet your needs.

Add New Note to this Reply

[Trevor]

This should start you off:

.entry-content .searchandfilter[data-sf-form-id="51428"] ul {
  padding: 0;
}
@media (max-width: 980px) {
  .searchandfilter[data-sf-form-id="51428"] li.sf-field-search,
  .searchandfilter[data-sf-form-id="51428"] li[data-sf-field-input-type="select"],
  .searchandfilter[data-sf-form-id="51428"] li > label,
  .searchandfilter[data-sf-form-id="51428"] li > label > select,
  .searchandfilter[data-sf-form-id="51428"] li.sf-field-search label input {
      width: 100%;
  }
  .searchandfilter[data-sf-form-id="51428"] li {
      margin-bottom: 20px;
  }
}

Add New Note to this Reply

[Trevor]

Try adding this to the customizer Addtional CSS (Appearance -> Customize):

.searchandfilter[data-sf-form-id="7246"] > ul > li > label > select {
  visibility: hidden;
}

Add New Note to this Reply

[Trevor]

This CSS should get you started:

.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical input {
  display: none;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label {
  text-align: center;
  width: 2.2em;
  line-height: 1.4em;
  border: 2px solid #666;
  padding: 3px;
  text-indent: 0;
  border-radius: 5px;
}
.searchandfilter[data-sf-form-id="1052"] ul {
  padding-left: 0;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical > ul > li {
  display: inline-block;
  margin-right: 10px;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical {
  display: block;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label:hover {
  cursor: pointer;
}
.searchandfilter[data-sf-form-id="1052"] .sf-input-checkbox:checked + .sf-label-checkbox {
  color: #fff;
  background: #666;
}

Add New Note to this Reply

[Trevor]

I can see that something is applying ‘Nice Select’ javascript to our select box (maybe your theme), which is hiding our field and showing a different field, but it is not copying across the terms. That you would need to talk with the theme author about (probably best to stop it from doing that). Some custom CSS could hide the nice select version of the field and reveal our field. For example:

.searchandfilter[data-sf-form-id="5562"] .sf-input-select:not(.nice-select) {
    display: inline-block !important;
}
.searchandfilter[data-sf-form-id="5562"] .sf-input-select.nice-select {
    display: none;
}

Add New Note to this Reply

[Trevor]

There are many snippets in the forum. See this search:

https://support.searchandfilter.com/forums/search/searchandfilter+data+sf+form+id+%7B+%7D/

Use ones that generally look like this (your ID number instead of 1234):

.searchandfilter[data-sf-form-id="1234"] {

Add New Note to this Reply

[Trevor]

There isn’t a guide as such, but there are many snippets in the forum. See this search:

https://support.searchandfilter.com/forums/search/searchandfilter+data+sf+form+id+%7B+%7D/

Use ones that generally look like this (your ID number instead of 1234):

.searchandfilter[data-sf-form-id="1234"] {

Add New Note to this Reply