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

[Anonymous]

Hey there,
I just purchased the pliugin. I tried your custom css in both these 2 versions but it doesn’t work (also adding the !important attribute), any reason why?

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

.searchandfilter[data-sf-form-id=”9707″] > ul > li {
display: inline-block !important;
vertical-align: top;
padding: 0 20px;
}

This is the test page I built Test page

Thanks!

[Trevor]

I haven’t checked this, but there are a couple of errors:

.searchandfilter[data-sf-form-id=”1216″] > ul
{
display: flex !important;
}

.sf-field-search {
flex-grow: 1 !important;
}

.sf-field-category,
.sf-field-tag,
.sf-field-reset {
flex-grow: 0 !important;
}

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

important was spelled wrong, and it is the ul inside the form that needs to be display: flex, not the form itself.

[Anonymous]

Trevor, I appreciate the help so far. This is the filter I tried in our functions.php file:

function filter_function_name( $query_args, $sfid ) {
	
	//if search form ID = 35922, the do something with this query
	if($sfid==35922)
	{
		//modify $query_args here before returning it
		$query_args['post_mime_type'] = 'application/pdf';
	}
	
	return $query_args;
}
add_filter( 'sf_edit_query_args', 'filter_function_name', 20, 2 );

I got the ID by looking at the query string in the URL on the edit page, as well as verifying it through data-sf-form-id="35922" on the form itself using Chrome inspector.

For our search page, we’re including posts, pages, and media (trying to only include PDFs from media). After I added this to functions.php, it actually stopped ALL search items from loading.

Any ideas?

[Trevor]

Like this:

body.mybodytag .searchandfilter[data-sf-form-id="###"]  > ul > li {
display: inline-block;
margin-right: 20px;
}
body.mybodytag .searchandfilter > ul > li:last-child {
margin-right: 0;
}

[Anonymous]

Ok, I just confirmed that my body class tags are different, so I will give it a try.

Can you tell me where the body class might go into this code snippet?

.searchandfilter[data-sf-form-id="###"]  > ul > li {
display: inline-block;
margin-right: 20px;
}
.searchandfilter > ul > li:last-child {
margin-right: 0;
}

[Trevor]

This is the form definition that I see on the page:

<form action="http://beta.agro-chemie.nl/zoeken/" method="post" class="searchandfilter" data-sf-form-id="6965" data-is-rtl="0" data-results-url="http://beta.agro-chemie.nl/zoeken/" data-ajax-form-url="http://beta.agro-chemie.nl/?sfid=6965&sf_action=get_form" data-use-history-api="1" data-template-loaded="1" data-lang-code="" data-ajax="0" data-auto-update="1" id="search-filter-form-6965" autocomplete="off"><ul><li class="sf-field-search" data-sf-field-name="search" data-sf-field-type="search" data-sf-field-input-type="">

And it is missing a lot of variables.

What version of the plugin are you using? It looks like it is 2.1.x, which is VERY old. Your license for support and updates has expired. We are currently at 2.3.4 and shortly will release 2.4.0

You need to renew your license (after renewal, it may take a while before the server updates your account) to be able to download the latest version from your account area) and receive further support. To update, you will need to use this method:

1) Deactivate S&F Pro in WP Admin Plugins page (do NOT delete the plugin from within WP Admin Plugins page; otherwise you will lose your search form)
2) Via FTP (or cpanel file manager if you have it), delete search-filter-pro folder from the wp-content\plugins folder on your server. If you wish to keep the folder, just in case, do NOT rename it, instead move it UP a folder into the wp-content folder.
3) Unzip the file that you have downloaded (if you are using cPanel File manager, you can upload the zip file and then extract it in the plugins folder).
4) Upload the search-filter-pro folder to the wp-content\plugins folder on your server.
5) Activate Search & Filter Pro in WP Admin Plugins page.

[Trevor]

In order to make it wider than the default, you would need to give it a fixed width or a % (of the container), like this:

.searchandfilter[data-sf-form-id="450621"] ul li .sf-input-text {
  width: 125px;
  min-width: 125px !important;
}

Where you replace 450621 with your form ID number.

[Anonymous]

Unfortunately this solution didn’t work either so the solution I came up with was to copy the code produced by your search widget and then alter the placeholder attribute with the following solution…

<form data-sf-form-id=’276′ data-is-rtl=’0′ data-maintain-state=” data-results-url=’/results’ data-ajax-url=’/?sfid=276&sf_action=get_data&sf_data=results’ data-ajax-form-url=’/?sfid=276&sf_action=get_data&sf_data=form’ data-display-result-method=’shortcode’ data-use-history-api=’1′ data-template-loaded=’0′ data-lang-code=” data-ajax=’1′ data-ajax-data-type=’json’ data-ajax-target=’#search-filter-results-276′ data-ajax-pagination-type=’normal’ data-ajax-links-selector=’.pagination a’ data-update-ajax-url=’1′ data-only-results-ajax=’1′ data-scroll-to-pos=’0′ data-init-paged=’1′ data-auto-update=’1′ action=’/results’ method=’post’ class=’searchandfilter’ id=’search-filter-form-276′ autocomplete=’off’ data-instance-count=’1′>

<li class=”sf-field-search” data-sf-field-name=”search” data-sf-field-type=”search” data-sf-field-input-type=””> <label><input placeholder=”” style=”font-family:Arial, FontAwesome” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=””></label>

</form>

[Trevor]

A search of these forums showed that I have done it like this before:

.searchandfilter[data-sf-form-id="450621"] ul li .sf-input-text {
  width: 125px;
  min-width: 125px !important;
}

I notice that your license has expired (many months ago), so I will not be able to offer additional support until it is renewed.

[Trevor]

This would be more like ti then:

.home .widget-wrap form.searchandfilter[data-sf-form-id="1135"] > ul:before {
  content: "SEARCH";
  float:left;
  padding-top: 28px;
  font-size: 14px;	
  color: #fff;
  margin-right: 20px;
  letter-spacing: 3px;
  font-weight: 400;
}