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

[Trevor]

That is indeed what I was going to suggest you do next. In fact, form #2 could have Auto Submit OFF, and not submit button, and you simply place an Advanced button on the page, with javascript to copy the values over to the hidden fields, and then submit that form, using something like (assuming form #2 has an ID of 1234):

$('.searchandfilter[data-sf-form-id="1234"]').submit();

[Trevor]

So, looking at Product Category, this CSS hides the children:

.searchandfilter[data-sf-form-id="6507"] li.sf-field-taxonomy-product_cat option.sf-level-1 {
  display: none;
}

[Trevor]

To remove the red lined items, you need this custom CSS:

.searchandfilter[data-sf-form-id="4548"] .sf-field-taxonomy-product_category .sf-level-0 > .sf-input-checkbox,
.searchandfilter[data-sf-form-id="4548"] .sf-field-taxonomy-product_category .sf-level-0 > .sf-label-checkbox {
    display: none;
}
.searchandfilter[data-sf-form-id="4548"] ul li.sf-field-taxonomy-product_category > ul > li {
    padding: 0;
}

As to the remove empty fields, I have no solution for that sorry. It may be something we will add in V3 (not due for some months yet), I am not sure.

It might be possible to do this with custom JavaScript, that checks if the field is empty, but I do not know how that would be done and have no snippets to share.

[Trevor]

Your custom CSS:

.searchandfilter[data-sf-form-id="2167"] .sf-field-submit input {
    border-radius: 3px;
    color: #fff;
    font-family: Assistant;
    font-weight: 400;
}

You need to have the icons in the size you need as transparent png images of the correct size on your site. The CSS would be something like this I think:

.searchandfilter[data-sf-form-id="2167"] .sf-field-search input {
    padding-right: 30px;
    background: url(your path to the image);
}

and

.searchandfilter[data-sf-form-id="2167"] .sf-field-taxonomy-job_locations select {
    padding-right: 30px;
    background: url();
}

I think.

[Trevor]

Something like this:

.searchandfilter[data-sf-form-id="8746"] li.sf-field-post-meta-german_players label:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 10px;
    background: url(https://kasinoforum.com/images/de.png);
    margin-left: 6px;
    background-size: contain;
}

Is that what you mean?

[Trevor]

The link you gave me comes back as IP address not found?

Did you use a copy of the form, or a different form, for the mobile view (as that is not allowed and will not work)?

You can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme. For example, like this:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="1234"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Where 1234 needs to be changed to match your form ID.

[Trevor]

Having a cloned form will potentially be an issue, as doing this (having more than one instance of the same form, or multiple different forms) will mean that they don’t work together and often will conflict with each other. Just be aware that this is possible (likely), so if you have problems with the results not working, that might be why. Normally, we suggest only one form instance on the results page.

You CAN have more than one form on any page other than the results page.

We are making some changes around this for V3, due in a few months.

This:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="224"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Is code aimed at a desktop, it would look like this for mobile:

@media (max-width: 991px) {
  .searchandfilter[data-sf-form-id="224"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

[Trevor]

Something like this:

.searchandfilter[data-sf-form-id="485"] .sf-field-submit input {
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 18px;
    font-family: 'Nunito',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 700;
    background-color: #ff2e73;
    padding: 10px 30px;
}

[Trevor]

You have this CSS that is causing a problem (can you remove it?):

@media (min-width: 991px) {
  .ct-shortcode .searchandfilter > ul > li {
    width: 16.66666667%;
  }
}
@media (min-width: 768px) {
  .ct-shortcode .searchandfilter > ul > li {
    width: 33.33333333%;
  }
}

But, my attempt:

.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order > ul > li.sf-option-active label {
  background-color: #7DA85B;
  color: #fff;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order input {
  display: none;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order label:hover {
  background-color: #7DA85B;
  color: #fff;
  cursor: pointer;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order label {
  text-align: center;
  line-height: 1.4em;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px 5px !important;
  text-indent: 0;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order > ul > li {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 10px;
}

A start at least, change as you need.

[Trevor]

I would use custom CSS like this:

.searchandfilter[data-sf-form-id="5532"] li[data-sf-field-input-type="select"] select {
    min-height: 52px;
}
.searchandfilter[data-sf-form-id="5532"] > ul > li,
.searchandfilter[data-sf-form-id="5532"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="5532"] li.sf-field-search input {
    min-width: 270px;
}
.searchandfilter[data-sf-form-id="5532"] > ul > li {
    padding: 0 5px 0 0;
}
.searchandfilter[data-sf-form-id="5532"] > ul > li:last-child {
    padding: 0;
}
.searchandfilter[data-sf-form-id="5532"] > ul {
    display: table;
    margin: 0 auto 10px;
}