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

[Trevor]

This should start you on your way:

.searchandfilter[data-sf-form-id="971"] li.sf-field-search input {
  padding: 1.5px 10px;
}
.searchandfilter[data-sf-form-id="971"] > ul > li,
.searchandfilter[data-sf-form-id="971"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="971"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="971"] .select2-container {
  min-width: 245px;
  float: left;
}
.searchandfilter[data-sf-form-id="971"] > ul {
  display: table;
}
.searchandfilter[data-sf-form-id="971"] li.sf-field-submit {
    clear: both;
}

Note that you have some CSS you already made:

input.sf-input-text {
    background-color: white;
    border: 1px solid #aaa !important;
    margin-top: 3px;
    font-size: 14px;
}

The font-size and margin-top in that block may need to be removed. It may also be that you need to place the CSS in a media query to apply only to desktop, but this should get you started. This is really outside the scope of our normal support, so if you need more doing, you may need to hire a third party coder to help you.

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