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

[Trevor]

My first attempt. Replace what you have:

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

… with this:

.searchandfilter[data-sf-form-id="420"] ul {
  padding-left: 0;
}
.searchandfilter[data-sf-form-id="420"] > ul > li > label,
.searchandfilter[data-sf-form-id="420"] > ul > li > label > select.sf-input-select,
.searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-search > label > input {
  min-width: 100%;
}
@media only screen and (max-width: 1024px) {
  .searchandfilter[data-sf-form-id="420"] > ul > li {
    min-width: 270px;
  }
}
@media only screen and (min-width: 768px) {
  .searchandfilter[data-sf-form-id="420"] > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 20px;
    min-width: 370px;
  }
  .searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-post-meta-tipologia:before,
  .searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-post-meta-comune:before {
    content: "";
    display: block;
    height: 32px
  }
}
@media only screen and (max-width: 767px) {
  .searchandfilter[data-sf-form-id="420"] > ul > li > label,
  .searchandfilter[data-sf-form-id="420"] > ul > li > label > select.sf-input-select,
  .searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-search > label > input {
    min-width: 100%;
  }
  .searchandfilter[data-sf-form-id="420"] > ul > li[data-sf-field-input-type="range-slider"] > .meta-slider {
    max-width: none;
    margin-right: 10px;
  }
}

[Trevor]

Does his custom CSS help?

.searchandfilter[data-sf-form-id="66179"] ul {
  padding-left: 0
}
.searchandfilter[data-sf-form-id="66179"] .sf-input-checkbox {
  height: 16px;
  width: 16px;
}
.searchandfilter[data-sf-form-id="66179"] li .sf-label-checkbox {
  vertical-align: text-top;
}
.searchandfilter[data-sf-form-id="66179"] li[data-sf-field-input-type="select"],
.searchandfilter[data-sf-form-id="66179"] li[data-sf-field-input-type="select"] label {
  min-width: 100%;
}

[Trevor]

We can deal with the full width search button after the dropdown issue. The problem is that the last field is a combobox, and so it is using the Choden combobox script, which re-styles the selector. To fix this needs a few steps and changes.

See this post for the explanation and steps need for you to take:

https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

This CSS would make the button full width:

 .searchandfilter[data-sf-form-id="3984"] li.sf-field-submit,
 .searchandfilter[data-sf-form-id="3984"] li.sf-field-submit input {
   width: 100%;
 }

[Trevor]

In your theme customizer, in the Custom CSS, add this:

.searchandfilter[data-sf-form-id="7184"] ul.sf_date_field > li:after {
  content: "\ec051";
  height: 40px;
  width: 40px;
  vertical-align: middle;
  line-height: 40px;
  font-size: 20px;
  transform: rotateY(180deg);
  color: #fff;
  text-align: center;
  font-weight: 400;
  font-family: icomoon-the7-font;
  position: absolute;
  margin-left: -40px;
  background: #c00f41;
}

This uses the same icon and font as the search in your theme header.

[Trevor]

As a note, if you want to override .searchandfilter .someclass {...} CSS, these two will do that:

#search-filter-form-123 .someclass {...}

OR

.searchandfilter[data-sf-form-id="123"] .someclass {...}

WITHOUT the need for !important.

[Trevor]

Something like this, I think:

.searchandfilter[data-sf-form-id="742"] > ul {
    display: table;
    margin: 0 auto;
}
.searchandfilter[data-sf-form-id="742"] .sf-field-category > ul > li {
    display: inline-block;
    margin-right: 15px;
}
.searchandfilter[data-sf-form-id="742"] ul  {
    padding: 0;
}
.searchandfilter[data-sf-form-id="742"] .sf-field-reset {
    text-align: center;
}

[Trevor]

If you make this search on our forum you will see some snippets:

https://support.searchandfilter.com/forums/search/data-sf-form-id/

Also, you can use your browser’s web developer tools inspector to look at you form. In Chrome press F12 to open the tools (or Ctrl + Shift + i), see here for an example:

https://www.screencast.com/t/YwjnhhNA

[Anonymous]

Hello
I don’t know why don’t see my code, it was :

.sf-field-taxonomy-destination .sf-level-2 { display: none; }
.sf-field-taxonomy-destination .sf-level-0 { display: none; }

Now, I changed with your code :

.searchandfilter[data-sf-form-id=”157762″] > ul > li.sf-field-taxonomy-destination .sf-level-2,
.searchandfilter[data-sf-form-id=”157762″] > ul > li.sf-field-taxonomy-destination .sf-level-0 {
display: none;
}

As i understand we can’t sort them directly by level 1?

Thank you

[Trevor]

I don’t see this CSS in there:

.sf-level-2 { display: none; }
.sf-level-0 { display: none; }

Which should be:

.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-destination .sf-level-2,
.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-destination .sf-level-0 {
  display: none;
}

But, I understand why it does not sort now. You are keeping only level 1. But they are still sorted under level 0, then level 1.

[Trevor]

And this CSS for the ORs:

.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-theme_voyage:before,
.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-meilleur_mois_voyage:before {
    content: "OR";
    display: block;
    position:absolute;
    margin-left: -35px;
    margin-top: 45px;
    font-family: Oswald,sans-serif;
    font-size: 18px;
}
.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-theme_voyage,
.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-meilleur_mois_voyage {
    padding-left: 40px;
}