Search Results for 'filter style'

[Anonymous]

Hi There,

I’m running into some difficulty targeting elements in the search and filter form. Particularly the submit button and the placeholder text.

Here is a page where the SF module is present: https://tandslaw.com/search-results/

I’m trying to get the SF integration (which I have marked with text “search and filter”) to match as closely as possible the module below (marked as “desired style”).

I’m also having trouble with the PHP to display the current query as part of the page title, and it seems to be stuck displaying part of the PHP code rather than the query. I’ve removed the PHP for now, but I’d like the query and category to be displayed in the page header where it currently has:

Keyword: Application (this would be the search query)

Category: USA (this would be the category selected, but will be replaced eventually by a custom taxonomy for the country)

Any help would be greatly appreciated!

[Anonymous]

Hi, I am delighted with the plugin and it works very well, but I would like to know if it is in your roadmap that in future versions you will review and modernize appearance issues, such as the appearance of the checkboxes and other filters in a more modern way.

Maybe as it has been raised in this forum taking styles like this one here: https://eiendom.dahlreklame.com/wp-content/uploads/2020/09/Screenshot-2020-09-23-at-15.28.40.jpg

Thank!

[Anonymous]

Hello dear support

I have had very good experiences with your tool so far! Likewise with this support forum, even if I have never written anything, but only read. Super job you do!

Now to my problem: I can style my filter bar very difficult. At the moment it looks like this:
https://makerstars.org/suchergebnisse

I would like to have it with a dropdown menu, and nicely aligned to the layout. (The fields next to each other and centered.) Can you help me there?

I also have another problem:
If I click on several fields, it can happen that some selected fields are deleted or I can’t click on a field. Best you try it yourself. What is the reason for this?

Greetings and thanks in advance
Björn

[Trevor]

This is the guide to making ‘safe’ changes to our results.php template:

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

Do you need to style the form itself? If you share with me a live link/URL to your search page so I can take a look, I might be able to give you some custom CSS, but you would need to show me, with one or more annotated screenshot(s), the design change(s) you want? If you can do that, you would need to upload the screenshot image(s) to a file sharing site (like the WordPress Cloudup site, Google Drive, Weshare, Dropbox etc.) and share the link with me?

[Trevor]

The user in this thread asked to change his terms to images (Flags for countries, but the same principles would apply:

https://support.searchandfilter.com/forums/topic/radio-button-filter-style/#post-273084

[Anonymous]

For feature:

<button class="mobile-menu-accordion" id="mobile-accordion-button" onclick="switchAccordion()">rozwiń filtry</button>
<div id="mobile-menu-panel">
<span id="ST">[searchandfilter id="4911"]</span>
</div>

<script>
function addListenerToSearchAndFilter(){
	var elements = document.getElementsByClassName("sf-label-radio");
	for (var i = 0; i < elements.length; i++) {
		elements[i].addEventListener('click', switchAccordionAfterClick, false);
	}
}

function switchAccordion(){
	var x = document.getElementById("mobile-menu-panel");
	var y = document.getElementById("mobile-accordion-button");
		if (x.style.display === "none") {
			x.style.display = "block";
			y.innerHTML = "zwiń filtry";
		} else {
			x.style.display = "none";
			y.innerHTML = "rozwiń filtry";
		}
	addListenerToSearchAndFilter();
}

function switchAccordionAfterClick (){
	var x = document.getElementById("mobile-menu-panel");
	var y = document.getElementById("mobile-accordion-button");		
	x.style.display = "none";
	y.innerHTML = "rozwiń filtry";
}
</script>

This code works well, however I would like to do one more thing. I would like to get name of the chosen filter to display. So now, the point is to find the way to get element label text

[Anonymous]

Thank You
Update – This code works, but only once. looks like afer use s&f resets my event listener

<button class="mobile-menu-accordion" id="mobile-accordion-button" onclick="switchAccordion()">rozwiń filtry</button>
<div id="mobile-menu-panel">
<span id="ST">[searchandfilter id="4911"]</span>
</div>

<script>
function switchAccordion(){
	var x = document.getElementById("mobile-menu-panel");
	var y = document.getElementById("mobile-accordion-button");
		if (x.style.display === "none") {
			x.style.display = "block";
			y.innerHTML = "zwiń filtry";
		} else {
			x.style.display = "none";
			y.innerHTML = "rozwiń filtry";
		}
}

var elements = document.getElementsByClassName("sf-label-radio");

function switchAccordionAfterClick (){
	if (window.screen.width < 757){
		var x = document.getElementById("mobile-menu-panel");
		var y = document.getElementById("mobile-accordion-button");
		x.style.display = "none";
		y.innerHTML = "rozwiń filtry";
		
	}
}

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', switchAccordionAfterClick, false);
}
</script>

Array.from(elements).forEach(function(element) {
    element.addEventListener('click', switchAccordionAfterClick);
});

[Anonymous]

There is a code:

<button class="mobile-menu-accordion" onclick="switchAccordion()">rozwiń filtry</button>
<div id="mobile-menu-panel">
<span id="ST">[searchandfilter id="4911"]</span>
</div>

<script>
function switchAccordion(){
	var x = document.getElementById("mobile-menu-panel");
		if (x.style.display === "none") {
			x.style.display = "block";
		} else { x.style.display = "none"; }
}

function switchAccordionAfterClick (){
	if (window.screen.width < 757){
		var x = document.getElementById("mobile-menu-panel");
		x.style.display = "none";
	}
}

document.querySelector('.sf-label-radio').addEventListener('click', switchAccordionAfterClick)
</script>

[Anonymous]

There is no lazy loading, but I found the issue. For whatever reason the filtered results columns are losing styles, the columns are not resizing to 100% for mobile so there is not enough room to display the content with the padding. Not sure if this is my theme or the plugin, but I’m using WP Bakery Default Post Grid with 3 columns. I can fix this using css. Thanks!

[Trevor]

In my example, the Category filter? If the form is set correctly, our cache will populate that list from the terms you have used in the posts.

I would point out that there are a number of pre-made card layout styles (templates) for that grid, I just made a simple one for myself (the first one on this list):

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