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

[Trevor]

Is this an example of what you made?

.sf-input-select {
    font-family: Gill Sans;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: #ffffff;
}

See how, in the inspector, there is a selector above it?

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

That has greater specificity.

It would suggest this might work (but it won’t quite):

.searchandfilter select.sf-input-select {
    font-family: Gill Sans;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: #ffffff;
}

But THIS would work:

.searchandfilter[data-sf-form-id="244"] select.sf-input-select {
    font-family: Gill Sans;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 20px;
    border-radius: 0px;
    background-color: #ffffff;
}

Does that help?

Add New Note to this Reply

[Trevor]

Try this Custom CSS (hopefully it may give you some ideas too):

.searchandfilter[data-sf-form-id="1104"] > ul > li {
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
}
.searchandfilter[data-sf-form-id="1104"] > ul > li:first-child {
  padding-left: 0;
}
.searchandfilter[data-sf-form-id="1104"] ul {
  padding: 0;
}
.searchandfilter[data-sf-form-id="1104"] > ul > li select {
  font-size: 16px;
  padding: 5px
}

Add New Note to this Reply

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

Add New Note to this Reply

[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;
  }
}

Add New Note to this Reply

[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%;
}

Add New Note to this Reply

[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%;
 }

Add New Note to this Reply

[Yordan]

This reply has been marked as private.

Add New Note to this Reply

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

Add New Note to this Reply

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

Add New Note to this Reply

[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;
}

Add New Note to this Reply