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

[Trevor]

I had to comment out all the custom CSS you made, so can you remove all of that?

#3 Change background color to what? Inside and outside the black boxed area? I assumed for now you wanted it white and to the whole form.

This is the CSS I made:

.searchandfilter[data-sf-form-id="289"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="289"] > ul > li:first-child {
  margin-left: 0;
}
.searchandfilter[data-sf-form-id="289"] > ul > li {
  margin-left: 25px;
  float:left;
}
.searchandfilter[data-sf-form-id="289"] {
  background: #fff;
  display: table;
  padding: 15px;
}
.searchandfilter[data-sf-form-id="289"] h4 {
  color: red;
  font-family: "Montserrat", Sans-serif;
  font-size: 18px
}
.searchandfilter[data-sf-form-id="289"] select,
.select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="289"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: green;
  font-family: "Montserrat", Sans-serif;
  font-size: 14px;
}

[Trevor]

I think you need something like this:

.searchandfilter[data-sf-form-id="18"] .sf-field-search input {
  font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
  color: #000;
  padding: 5px 10px;
  background: #eee;
  font-size: 13px;
}
.searchandfilter[data-sf-form-id="18"] .sf-field-submit input  {
  font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
  color: #fff;
  padding: 5px 10px;
  border: 0px solid #B6008A;
  background: #B6008A
}

That should give you the idea anyway.

[Anonymous]

Hello there,

I want to display categories on my articles page but even using documentations instructions for customizing css I seem unable to modify how my categories are displayed.

`.searchandfilter[data-sf-form-id=”2721″]
{
font-family: BatonTurboWeb-Medium;
font-size:18px;

}

Could you help me please

[Trevor]

I would do something like this (but it might need to be inside a medai query to keep it applying to desktop only:

.searchandfilter[data-sf-form-id="13517"] {
  margin: 0 65px;
}
.searchandfilter[data-sf-form-id="13517"]  > ul > li {
  min-width: 300px;
}
.searchandfilter[data-sf-form-id="13517"]  > ul > li > label {
  min-width: 260px;
}

300px is the smallest you can use for them to be the same width, with the data terms you have inside the fields, and font size.

[Anonymous]

Wondering if this was solved — I have a similar problem, I’ve got radio buttons set up but I’d like to be able to just click on the category name to get the Ajax results. Unfortunately the site is still in testing so I can’t send you a link. If I could eliminate the radio button and just click on the category name that would be ideal. I know this may be beyond the support you offer but if you could point me in the right direction I’d really appreciate it. Thank you!

<div class="category-search">
				<form data-sf-form-id='131' data-is-rtl='0' data-maintain-state='' data-results-url='http://pugetgardens/gardens' data-ajax-url='http://pugetgardens/?sfid=131&sf_action=get_data&sf_data=results' data-ajax-form-url='http://pugetgardens/?sfid=131&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-131' 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='http://pugetgardens/gardens' method='post' class='searchandfilter' id='search-filter-form-131' autocomplete='off' data-instance-count='1'><ul><li class="sf-field-category" data-sf-field-name="_sft_category" data-sf-field-type="category" data-sf-field-input-type="radio">		<ul class="">
			
			<li class="sf-level-0 sf-item-0" data-sf-count="0" data-sf-depth="0"><input  class="sf-input-radio" type="radio" value="" name="_sft_category[]" id="sf-input-2e2df78133ccdeebcd7ee3681e794021"><label class="sf-label-radio" for="sf-input-2e2df78133ccdeebcd7ee3681e794021">All Gardens</label></li><li class="sf-level-0 sf-item-4" data-sf-count="1" data-sf-depth="0"><input  class="sf-input-radio" type="radio" value="bainbridge-island" name="_sft_category[]" id="sf-input-75dfcbc03c3a760a48596c14525f6c6f"><label class="sf-label-radio" for="sf-input-75dfcbc03c3a760a48596c14525f6c6f">Bainbridge Island</label></li><li class="sf-level-0 sf-item-6" data-sf-count="1" data-sf-depth="0"><input  class="sf-input-radio" type="radio" value="king-county" name="_sft_category[]" id="sf-input-0fecb90cc4f7642b0f889c5c046a9f8f"><label class="sf-label-radio" for="sf-input-0fecb90cc4f7642b0f889c5c046a9f8f">King County</label></li><li class="sf-level-0 sf-item-5 sf-option-active" data-sf-count="2" data-sf-depth="0"><input  class="sf-input-radio" type="radio" value="north-kitsap" name="_sft_category[]" checked="checked" id="sf-input-1e71a583a00b94cae4cdd129e10cdc18"><label class="sf-label-radio" for="sf-input-1e71a583a00b94cae4cdd129e10cdc18">North Kitsap</label></li>		</ul>
		</li></ul></form>					</div>

[Trevor]

.searchandfilter .sf-field-category h4 {
  display: inline-block;
  font-size: 18px;
}
.searchandfilter[data-sf-form-id="262"] .sf-field-category > ul {
  display: inline-block;
  margin-left: 10px;
}

[Anonymous]

Search form is generated by the following code:
<form data-sf-form-id=”7435″ data-is-rtl=”0″ data-maintain-state=”” data-results-url=”https://DOMAIN/search-results/&#8221; data-ajax-url=”https://DOMAIN/search-results/?sf_data=results&#8221; data-ajax-form-url=”https://DOMAIN/?sfid=7435&sf_action=get_data&sf_data=form&#8221; data-display-result-method=”custom” data-use-history-api=”1″ data-template-loaded=”0″ data-lang-code=”en” data-ajax=”1″ data-ajax-data-type=”html” data-ajax-target=”.post-grid” 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=”https://DOMAIN/search-results/&#8221; method=”post” class=”searchandfilter” id=”search-filter-form-7435″ autocomplete=”off” data-instance-count=”1″ _lpchecked=”1″>

<li class=”sf-field-search” data-sf-field-name=”search” data-sf-field-type=”search” data-sf-field-input-type=””><label><input placeholder=”Search …” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=””></label>

</form>

I used the following instructions for displaying results:
https://searchandfilter.com/documentation/3rd-party/post-grid/

Maybe you need username and password to test what is happening. Please email me at my account’s email

Many thanks

[Anonymous]

The one in WPForms makes a shortcode [wpforms id=”5093″] but I am not sure how to include it in:

.searchandfilter[data-sf-form-id=”1428″]
{
//do stuff with this particular search form
}

[Anonymous]

Trevor,

I added a few snippets of CSS:

.searchandfilter[data-sf-form-id=”11564″]
{
font-size: 2em;
width: 600px !important;
}

I think I also tried:

.searchandfilter li.sf-field-search label,
.searchandfilter li.sf-field-search input {
width: 100%;
}

The CSS was a guess, but I couldn’t get it to work.

I also tried adjusting various elements with the Inspect tool with Chrome to no avail. Any ideas?

I’m using the Avada theme, which seems to interact with S&F unusually at times…

cheers,
JB

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