If, if you examine the page code using the inspector, you see this for the form start tag:
<form action="http://www.hmgaerospace.com.gridhosted.co.uk//lara/news/" method="post" class="searchandfilter" data-sf-form-id="1418" data-is-rtl="0" data-results-url="http://www.hmgaerospace.com.gridhosted.co.uk//lara/news/" data-ajax-url="http://www.hmgaerospace.com.gridhosted.co.uk/?sfid=1418&sf_action=get_results" data-ajax-form-url="http://www.hmgaerospace.com.gridhosted.co.uk/?sfid=1418&sf_action=get_form" data-use-history-api="1" data-template-loaded="0" data-lang-code="" data-ajax="1" data-ajax-target="#search-filter-results-1418" data-ajax-links-selector=".pagination a" data-update-ajax-url="1" data-only-results-ajax="1" data-scroll-to-pos="0" data-auto-update="" id="search-filter-form-1418" autocomplete="off">
Notice the action url and the data-results-url have this as their value:
http://www.hmgaerospace.com.gridhosted.co.uk//lara/news/
There are 2 slashes in the url of both. Is this an issue in the WordPress setup?
AnonymousInactive
I am copying the following to my child theme stylesheet as I want search fields to appear horizontally, however there is no change.
.searchandfilter[data-sf-form-id=”2374″]
{
display: inline !important;
font-size: 100px !important;
}
I’ve also tried
.searchandfilter p
{
display: inline !important;
font-size: 100px !important;
}
Can you please advise?
Thank you.
AnonymousInactive
Thank you I found this thread https://support.searchandfilter.com/forums/topic/sf-horizontal-the-final-solution/ which helped a lot but the problem I am coming across right now is getting the check boxes to line up in 3 columns in a row like in the photo above. here is the css I am using .
.searchandfilter[data-sf-form-id=”116014″] .chosen-container.chosen-container-multi {
width: 100% !important;
margin-top: -5px !important;
}
.searchandfilter[data-sf-form-id=”116014″] input.default {
border-color: rgba(0,0,0,0.3);
outline: 1;
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.2);
-webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
transition: border linear 0.2s,box-shadow linear 0.2s;
}
.searchandfilter[data-sf-form-id=”116014″] li.sf-field-category {
width: 30% !important;
}
.searchandfilter[data-sf-form-id=”116014″] select.sf-input-select {
width: 100%;
}
`
Hi
You would need to decide which bits need to be where, but this for example:
.searchandfilter[data-sf-form-id="41629"] li.sf-field-category {
width: 20% !important;
}
Might become this:
.searchandfilter[data-sf-form-id="41629"] li.sf-field-category {
width: 20% !important;
float: left;
display: inline-block !important;
}
and so on.
AnonymousInactive
Ok this is the final result with consistency:
.searchandfilter[data-sf-form-id="2545"] > ul > li {
display:inline-block !important;
}
.searchandfilter[data-sf-form-id="2545"] li.sf-field-search {
width: 40%;
padding-right:10px !important;
}
.searchandfilter[data-sf-form-id="2545"] li.sf-field-tag {
width: 40%;
padding-right:10px !important;
}
/* format tag fields for consistency */
.searchandfilter[data-sf-form-id="2545"] .chosen-container-multi .chosen-choices {
display: inline-block;
height: 2.65em !important;
margin-bottom: 0px;
border: 1px solid #ddd;
padding: 0 0.65em;
font-size: 13px;
line-height: normal;
color: #555;
background-color: #fff;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
.searchandfilter[data-sf-form-id="2545"] .chosen-container.chosen-container-multi {
width: 100% !important;
margin-top: -5px !important;
}
.searchandfilter[data-sf-form-id="2545"] input.default {
border-color: rgba(0,0,0,0.3);
outline: 0;
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.2);
-webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
transition: border linear 0.2s,box-shadow linear 0.2s;
}
.searchandfilter[data-sf-form-id="2545"] li.sf-field-category {
width: 20% !important;
}
.searchandfilter[data-sf-form-id="2545"] select.sf-input-select {
width: 100%;
}
Hope can help a lot of people that are trying to have an horizontal view for S&F.
Now I just need to edit the @media CSS for smartphones and tablets.
AnonymousInactive
Hello,
I am using GTranslate plugin and would like SF2 ajax form results to be translated.
I got this from Gtranslate support:
——-
You have this form:
<form action=”http://en.tracers.ru/archive/” method=”post” class=”searchandfilter” data-sf-form-id=”17942″ data-is-rtl=”0″ data-results-url=”http://tracers.ru/archive/” data-ajax-url=”http://tracers.ru/?sfid=17942&sf_action=get_results” data-ajax-form-url=”http://tracers.ru/?sfid=17942&sf_action=get_form” data-use-history-api=”1″ data-template-loaded=”0″ data-lang-code=”” data-ajax=”1″ data-ajax-target=”#search-filter-results-17942″ data-ajax-links-selector=”.pagination a” data-update-ajax-url=”1″ data-only-results-ajax=”1″ data-scroll-to-pos=”0″ data-auto-update=”1″ id=”search-filter-form-17942″ autocomplete=”off”>
You will need to change data-results-url, data-ajax-url, data-ajax-form-url attributes to be relative or to include the language code like in action attribute. This attributes are not standard attributes like action, that’s why they are not getting replaced with appropriate language domain automatically.
Thanks! – See more at: http://gtranslate.net/forum/ajax-filter-resets-language-t4636.html#sthash.jFV69pbs.dpuf
——-
Can you tell me where should I make change in code?
Thank you,
Oleg
AnonymousInactive
I take several tests and i can’t change page on the result page on a different language than a native one. In english (native language), everything goes well, but in french (in my case) i can’t change page. I changed to apache server and everything is ok. But for performance purpose, i need to run my website on Nginx.
I have a Dreamhost VPS server with Nginx 1.4.4 with PHP 5.5
For debug purpose, here is what i have in response when a click on a page in my result page in French :
url : http://wysote.tzclients.com/fr/?sfid=102&sf_action=get_results&sf_paged=2&lang=fr
And the output is the html of my home page.
In english, the output start with this : {“form”:”<form action=\”http:\/\/wysote.tzclients.com\/inventory\/\” method=\”post\” class=\”searchandfilter\” data-sf-form-id=\”97\”
AnonymousInactive
I ended up adding this code to my site instead of using the search and filter pro widget:
<form action=”” method=”post” class=”searchandfilter” data-sf-form-id=”34373″ data-use-history-api=”1″ data-template-loaded=”0″ data-lang-code=”” data-results-url=”http://focenter.staging.wpengine.com/search-results/” data-display-results=”archive” data-auto-update=”1″ id=”search-filter-form-34373″>
<li class=”sf-field-search” data-sf-field-name=”search” data-sf-field-type=”search” data-sf-field-input-type=””><input isp_ignore type=”text” name=”_sf_search” placeholder=”type and hit enter…” value=””><input type=”hidden” name=”_sf_submitted” value=”1″ /><input type=”hidden” name=”_sf_form_id” value=”34373″ class=”sf_form_id” />
</form>
Above I added the isp ignore attribute and it seems to have removed the autocomplete feature from the instant product search which shouldn’t have been showing up anyway. Now the issue is that when I submit the search, I am still seeing products when I should only be seeing posts and pages according to how that search and filter form was setup.
Am I doing this correctly? And how do I make sure the results show up correctly and don’t pull results from the other search box?
Hey Luis
You can target a search form using the ID already:
.searchandfilter[data-sf-form-id=123] input[type=text]
{
border:1px solid #f00;
}
Thanks
AnonymousInactive
Hi,
I’m trying to validate my website on http://validator.w3.org/ and giving me the following error:
Bad value for attribute action on element form: Must be non-empty.
This is the code that’s causing the problem:
<form action="" method="post" class="searchandfilter" data-sf-form-id="1272" ... >
Thanks for any help.