how do I make the search form horizontal ?

Jochen

#263544

I would like the 3 different combo boxes to appear next to each other.

https://kasinoforum.com/casinos/

How do I change the styling?
Thanks

Add New Note to this Reply

Jochen

#263552

Nevermind this question. The answer is of course in the documentation
https://searchandfilter.com/documentation/getting-started/display-search-form/

Add New Note to this Reply

Jochen

#263553

any suggestion on how to make this look better on mobile?
And why does the form load saying “0 items” only on mobile instead of the default value?

Thanks 🙂

Add New Note to this Reply

Trevor Moderator

#263572

The link you gave me comes back as IP address not found?

Did you use a copy of the form, or a different form, for the mobile view (as that is not allowed and will not work)?

You can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme. For example, like this:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="1234"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Where 1234 needs to be changed to match your form ID.

Add New Note to this Reply

Jochen

#263573

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#263582

It now works for me. I can see an error coming from a script added to the page by something called a Password Strength Meter, and that error may cause our JavaScript to stop working.

Also, you are using Comboboxes, and our plugin is set (as it is by default) to use the Chosen script. Instead, use Select2 to make the select boxes. You may need to make some changes.

Go to wp-admin -> Search & Filter -> Settings -> Combobox Script

Change this from Chosen to Select2 – we’re dropping support for Chosen in v3, because it has too many issues on mobile.

Add New Note to this Reply

Jochen

#263767

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#263845

Your theme has many change points:

The mobile menu appears at 1199px

But, below that, I see:

1024px
991px
767px

To provide custom CSS for this would be quite complex, so you may need to have a third party coder do this for you. Whilst I can help with some simple CSS, help with this is outside the scope of our support, sorry.

Add New Note to this Reply

Jochen

#263867

Thanks Trevor, I completely understand that you cannot help me with custom css. Let me try a different approach which might be much easier:
I can wrap the search form into a “Spoiler” (I’m using this plugin https://getshortcodes.com/docs/spoiler/) on mobile and show it only in open status if a filter is set already.
– Can you please me with a query that will check if any filters are already set
– wp_is_mobile() also return true on larger screens or on landscape view, do you know a better way?

$searchform = do_shortcode('[searchandfilter id="8746"]');
$no_filters_set = 1; // need a query here if any search filters are set
if ( wp_is_mobile()) {	
	if 	($no_filters_set)  {
	    $my_shortcode = '[su_spoiler title="Filter Articles" open="NO" style="default" icon="plus" anchor="" anchor_in_url="no" class=""]';
	}		
	else {
		$my_shortcode = '[su_spoiler title="Filter articles" open="YES" style="default" icon="plus" anchor="" anchor_in_url="no" class=""]';
	}
	
	$my_shortcode .= $searchform;
	$my_shortcode .= '[/su_spoiler]';
	echo do_shortcode($my_shortcode);
} 
else { echo $searchform; // show the searchform on desktop	
		}

Add New Note to this Reply

Trevor Moderator

#263869

The general method to test if the page is filtered is shown here:

https://support.searchandfilter.com/forums/topic/dont-show-results-until-user-clicks-submit-search/#post-262240

The first part of the IF is there is no filtering, the second part if there IS filtering.

Add New Note to this Reply

[Author]

Posts