This reply has been marked as private.
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
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.
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>
.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;
}
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/” data-ajax-url=”https://DOMAIN/search-results/?sf_data=results” data-ajax-form-url=”https://DOMAIN/?sfid=7435&sf_action=get_data&sf_data=form” 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/” 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
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
}
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
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!
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.
