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

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

Add New Note to this Reply

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

Add New Note to this Reply

[Trevor]

There is no way to add a scroll to a select field other than to have lots of entries (as our demo does). What you could do is to make it a combobox in the field settings. This would the apply the Select2 jQuery script to it, and style it much better.

At the moment you are hiding if empty. But you want to show them, see here:

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

Some custom CSS is needed for the date to be in 2 columns:

.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date input {
    width: 100px;
    min-width: auto;
    display: inline-block;
}
.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date li {
    display: inline-block;
}
.searchandfilter[data-sf-form-id="14110"] li.sf-field-post_date li:first-child {
    margin-right: 20px;
}

Add New Note to this Reply

[Trevor]

For 1, you would have had to specify a template file to use.

You would need to be using a child theme. You copy that file to the child theme folder, and then edit it to add the PHP do_shortcode code as shown here:

<?php echo do_shortcode('[searchandfilter id="710"]'); ?>

You may also need to make the form horizontal, like this (change the px value to match your theme’s mobile/responsive breakpoint):

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

These are for guidance only. We do not include customising your theme and templates within the scope of support.

2. You wish to use the Shortcode method, but will need to create you own template. You still need to use our results.php template file, but customize it according to these instructions:

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

This is only a simple exemplar template, which uses the WordPress Codex structure and PHP.

So, what to do? You can replace almost anything you want in the file, but keep the if … else … endif and the while …. endwhile and transplant your own HTML, PHP and class names to replace our code. Do this slowly and test regularly, keeping backups at each stage.

The results.php template code will run inside your theme’s standard page template, in the content part, called by our results shortcode.

Again, we do not offer a coding service to do this, but it is fairly standard WordPress code, so you can often copy code from elsewhere in your theme.

Add New Note to this Reply

[Sasha Maric]

Sorry if I did not explain it properly 🙂

Function is fine and works fine, but I just want to specify it only for the one search form and for that I have used if($sfid==1893)

Form id from backend of plugin and in html is 1893. So I will only use this function for search form id 1893.

Because I also have form id 1826, 1854, 1852, 1853 and 1851 and here I need to use other intervals.
So I will create new function for each search form with different data-sf-form-id for different intervals.

I have 5 search form on 5 different pages, so they are not on the same page .

Hope it makes sense

Sasha

Add New Note to this Reply

[Trevor]

It is because you have this:

.home .searchandfilter[data-sf-form-id="1134"] > ul > li.sf-field-search label {
    display: block;
    padding-right: 200px;
    padding-left: 200px;
}

The padding take up all the screen on mobile, pretty much.

You need to add some CSS media rules around the tat CSS, like this:

@media (min-width: 991px) {
    .home .searchandfilter[data-sf-form-id="1134"] > ul > li.sf-field-search label {
        padding-right: 200px;
        padding-left: 200px;
    }
}
.home .searchandfilter[data-sf-form-id="1134"] > ul > li.sf-field-search label {
    display: block;
}

It may take some fiddling with to get it right, but I will leave that to you, as this isn’t really within the scope of our support.

Add New Note to this Reply

[Trevor]

This reply has been marked as private.

Add New Note to this Reply

[Trevor]

I think you would need something like this:

.searchandfilter[data-sf-form-id="4190"] li[data-sf-field-input-type="checkbox"] ul li,
.searchandfilter[data-sf-form-id="4190"] li[data-sf-field-input-type="radio"] ul li {
    display: inline-block;
    margin-right: 20px;
}

Add New Note to this Reply

[Trevor]

Are you wanting to ONLY ever have this form search inside that ‘Real Weddings’ category?

BTW, I think you might want to use this custom CSS:

.searchandfilter[data-sf-form-id="63885"] li[data-sf-field-input-type="checkbox"] ul li {
    display: inline-block;
    margin-right: 20px;
}

Add New Note to this Reply

[Trevor]

This:

.searchandfilter[data-sf-form-id="6646"] ul {
  padding-left: 0;
}

Would become this:

.searchandfilter[data-sf-form-id="6646"] ul,
.searchandfilter[data-sf-form-id="7085"] ul {
  padding-left: 0;
}

Add New Note to this Reply