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

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

[Trevor]

I am not sure if this works for you, as Custom CSS:

.searchandfilter[data-sf-form-id="2062"] li.sf-field-search label::after {
  font-family: FontAwesome;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  content: "\f002";
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background: #000;
  position: relative;
  top: 3px;
  cursor: pointer;
 }

[Trevor]

This Custom CSS is my first hit at it:

.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: 26px;
  font-weight: 400;
  letter-spacing: 3px;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] h4 {
  font-size: 18px;
  font-weight:600;
}
.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 #002f60;
  padding: 15px;
}
.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%;
}

However. The following need specifying:

font colors for each field
font sizes for each field
border colors for the form and fields

[Trevor]

Change it to this:

/*------formularios busqueda adsforchange en linea y centrado------*/
.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
.searchandfilter[data-sf-form-id="10033"] > ul {
  padding-left: 0;
}

@media only screen and (min-width: 1025px) 
{.searchandfilter[data-sf-form-id="10033"] > ul > li:first-child {
  margin-left: 0px;
}
.searchandfilter[data-sf-form-id="10033"] > ul > li {
  margin-left: 10px;
  float: left;
}
.searchandfilter[data-sf-form-id="10033"] {
  float: left;
  width: 100%;
}
.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
.searchandfilter[data-sf-form-id="10033"] > ul {
  display: table;
  margin: 0 auto;
}
}
@media only screen and (max-width: 1024px) {
.searchandfilter[data-sf-form-id="10033"] .sf-field-submit input {
display: table;
margin: 0 auto;
padding-left: 2;
}
.searchandfilter[data-sf-form-id="10033"] .sf-field-submit input  {
-webkit-appearance: none;
-webkit-border-radius: 0;
color: #fff;
height: 40px;
font-family: "Raleway", Sans-serif;
background: #1890ff;
font-size: 16px;
box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3)
}
}

This moves the padding-left: 0; that was inside the media query to outside it, so it also applies to mobile.

[Anonymous]

Ei Trevor!!
It worked to focus on the mobile and match the size of the fields.
To cancel the “ios” button I used this:

-webkit-appearance: none;
-webkit-border-radius: 0;

So my code has been like this:

/*------formularios busqueda adsforchange en linea y centrado------*/
.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
@media only screen and (min-width: 1025px) 
{.searchandfilter[data-sf-form-id="10033"] > ul > li:first-child {
  margin-left: 0px;
}
.searchandfilter[data-sf-form-id="10033"] > ul > li {
  margin-left: 10px;
  float: left;
}
.searchandfilter[data-sf-form-id="10033"] {
  float: left;
  width: 100%;
}
.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
.searchandfilter[data-sf-form-id="10033"] > ul {
  display: table;
  margin: 0 auto;
  padding-left: 0;
}
}
@media only screen and (max-width: 1024px) {
.searchandfilter[data-sf-form-id="10033"] .sf-field-submit input {
display: table;
margin: 0 auto;
padding-left: 2;
}
.searchandfilter[data-sf-form-id="10033"] .sf-field-submit input  {
-webkit-appearance: none;
-webkit-border-radius: 0;
color: #fff;
height: 40px;
font-family: "Raleway", Sans-serif;
background: #1890ff;
font-size: 16px;
box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3)
}
}

I only have one thing left …
As you can see on mobile devices, it is not completely centered, but has a margin to the left.
I’ve tried everything, but I can’t keep it completely focused. Do you recommend something to me? I have to turn to you.

Thanks a million for your time.

[Trevor]

Does this work?

.searchandfilter[data-sf-form-id="10033"] select,
.searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
  min-width: 240px;
}
@media only screen and (min-width: 1025px) {
  .searchandfilter[data-sf-form-id="10033"] > ul > li: first-child {
    margin-left: 0px;
  }
  .searchandfilter[data-sf-form-id="10033"] > ul > li {
    margin-left: 10px;
    float: left;
  }
  .searchandfilter[data-sf-form-id="10033"] {
    float: left;
    width: 100%;
  }
  .searchandfilter[data-sf-form-id="10033"] > ul {
    display: table;
    margin: 0 auto;
    padding-left: 0;
  }
}
@media only screen and (max-width: 1024px) {
  .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input {
    margin: 0 auto;
    display: table;
  }
}

Note, the iPhone takes over control of the button, so I am unsure how to change that.

[Anonymous]

ohhh!!! just do it Trevor, only Just need to justify the mobile versions, and “color submit”in ios.

I have divided it.
1. justification

/ * ------ online and focused adsforchange search forms ------ * /
@media only screen and (min-width: 1025px) {
  .searchandfilter[data-sf-form-id="10033"] > ul > li: first-child {
    margin-left: 0px;
  }
  .searchandfilter[data-sf-form-id="10033"] > ul > li {
    margin-left: 10px;
    float: left;
  }
  .searchandfilter[data-sf-form-id="10033"] {
    float: left;
    width: 100%;
  }
  .searchandfilter[data-sf-form-id="10033"] select,
  .searchandfilter[data-sf-form-id="10033"] .sf-field-search input {
    min-width: 240px;
  }
  .searchandfilter[data-sf-form-id="10033"] > ul {
    display: table;
    margin: 0 auto;
    padding-left: 0;
  }
}

So I managed not to lose the color design of the fields.

2. Design:

/ * ------ forms search adsforchange color ------ * /
.searchandfilter[data-sf-form-id = "10033"] .sf-field-search input {
  color: # 000;
  height: 40px;
  font-family: "Raleway", Sans-serif;
  background: #eee;
  font-size: 16px;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id = "10033"] select {
  color: black;
  font-family: "Raleway", Sans-serif;
  font-size: 16px;
  background: #eee;
  border-radius: 4px;
  height: 40px;
}
.searchandfilter[data-sf-form-id = "10033"] .sf-field-submit input {
  color: #fff;
  height: 40px;
  font-family: "Raleway", Sans-serif;
  background: #1890ff;
  font-size: 16px;
  box-shadow: 0 12px 18px -6px rgba (0, 0, 0, 0.3)! important;
}

[Trevor]

Change this:

.searchandfilter[data-sf-form-id="10033"]>ul {
    display: table;
    margin: 0 auto;
}

to this:

.searchandfilter[data-sf-form-id="10033"]>ul {
    display: table;
    margin: 0 auto;
    padding-left: 0;
}

In order to do different CSS for mobile, what I gave you (and what you changed it to, for now, will need wrapping in a media query, like this:

@media only screen and (min-width: 1025px) {
/* code here */
}

THEN I can start to look at the mobile version. Let me know when you have made this one CSS padding addition and the change to add the media query?

[Trevor]

Does this look better:

.searchandfilter[data-sf-form-id="9080"] > ul > li:first-child {
  margin-left: 0;
}
.searchandfilter[data-sf-form-id="9080"] > ul > li {
  margin-left: 20px;
  float: left;
}
.searchandfilter[data-sf-form-id="9080"] {
  float: left;
  width: 100%;
}
.searchandfilter[data-sf-form-id="9080"] select {
  color: black;
  font-family: "Raleway", Sans-serif;
  font-size: 16px;
  background: #eee;
  padding: 9px;
  border-radius: 6px;
}
.searchandfilter[data-sf-form-id="9080"] select,
.searchandfilter[data-sf-form-id="9080"] .sf-field-search input {
  min-width: 240px;
}
.searchandfilter[data-sf-form-id="9080"] > ul {
  display: table;
  margin: 0 auto;
}

Replace/remove this:

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

And I think you need to add the 6px border-radius to the text search field. In the code you already have:

.searchandfilter[data-sf-form-id="9080"] .sf-field-search input {
    color: #000;
    padding: 10px 10px;
    font-family: "Raleway";
    background: #eee;
    font-size: 16px;
    border-radius: 6px;
}

[Anonymous]

We have done this to align it on the page:

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

And this to change the size of “search” and “submit”:

.searchandfilter[data-sf-form-id=”9080″] .sf-field-search input {
color: #000;
padding: 10px 10px;
font-family: “Raleway”;
background: #eee;
font-size: 16px;
}
.searchandfilter[data-sf-form-id=”9080″] .sf-field-submit input {
color: #fff;
font-size: 16px;
font-family: “Raleway”;
padding: 10px 10px;
background: #1890ff
}

Regards