Search Results for '.searchandfilter custom css'

[Anonymous]

Hello,

I am having trouble adding font-awesome to the submit button. I know how to customize it using:

.searchandfilter input[type=”submit”] {….}

However, can you please provide the CSS to add in the fa fa-search (f002) into the CSS customizer for wordpress. This is the part that I am struggling with. From their I can use the inspector once i can get it into the widget’s search button.

Thanks.

[Trevor]

OK, you would need custom CSS to adjust or remove the padding between fields. Something like this:

.searchandfilter > ul > li {
  padding-top: 0px;
  padding-bottom: 0px;
}

[Trevor]

Yes I am using Chrome in Windows. But now I see it. And I think I have a fix:

Add this custom CSS to the theme:

body.sfajax .elementor-380 .elementor-element.elementor-element-6c9e0661 .elementor-posts-container .elementor-post__thumbnail {
  padding-bottom: 0 !important;
}

Then you need to add a javascript to the page:

<script>
(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxstart", ".searchandfilter", function(){
    jQuery("body").addClass("sfajax");
  });
}(jQuery));
</script>

[Trevor]

Hi

So, other than the drop down arrows (which would require some javascript to be added, so let me know if you want to go that far, this Custom CSS is the basis for getting it to look ‘right@:

.searchandfilter .sf-field-submit input[type="submit"] {
  color: #fff;
  background: #02aece;
  font-family: "Roboto", Sans-serif;
  border-radius: 50px 50px 50px 50px;
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  padding: 12px 24px;
  flex-grow: 1;
  display: block;
  width: 100%;
}
.searchandfilter select {
  color: #7a7a7a;
  font-family: "Roboto", Sans-serif;
  font-size: 16px;
  border-radius: 50px 50px 50px 50px;
  outline: 0;
  padding: 15px 5px;
  flex-grow: 1;
  display: block;
  width: 100%;
}
.searchandfilter > ul {
  margin-left: 0;
  padding-left: 0;
}
.searchandfilter > ul li {
  padding: 6px 0;
  display: flex;
}
.searchandfilter ul li label {
  display: flex;
  width: 100%;
}

[Trevor]

I made your post in to a new thread, as it was not really related to that thread.

You will need to add some Custom CSS to your theme. You can usually do this by going to Appearance -> Customize -> Additional CSS and add the following:

.searchandfilter > ul > li[data-sf-field-input-type="checkbox"] > ul,
.searchandfilter > ul > li[data-sf-field-input-type="radio"] > ul {
  max-height: 150px;
  overflow: auto;
}

[Trevor]

I can see the problem. Your theme is overriding our plugin CSS. You will need some Custom CSS to fix this:

.sidebar .widget .searchandfilter ul li ul li ul {
    margin-left: 20px;
}

I can see that you have sub-divided the categories up in

Disease
Species
Tissue Type

It would be MUCH better to have these as distinct custom taxonomies. See this post for more information:

https://support.searchandfilter.com/forums/topic/multiple-category-fields/#post-190777

[Trevor]

Hi Rita

It would require custom CSS to do this, like this:

.searchandfilter > ul > li:first-child {
	padding-left: 0px;
}
.searchandfilter > ul > li {
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;
}
.entry-content .searchandfilter > ul {
	padding: 0;
}
.searchandfilter > ul > li,
.searchandfilter .select2-container,
.searchandfilter .select2-container--default .select2-selection--multiple {
	min-width: 250px;
}

[Trevor]

You can only do as you want (showing different fields in the form) using custom Javascript. It is something we plan for sometime in the version 3 release cycle. But, what you want in this regard CAN be done, as I some other users have reported that they have done it.

The question about region seems much the same. Each field in our form must be drawing its terms from a different taxonomy or custom field is the only rule you must follow.

I am sure someone has posted the javascript that they used, maybe this:

https://support.searchandfilter.com/forums/topic/hide-empty/

There are specific settings in our form that you must also make, plus the ‘category’ field must be in the form (even if hidden with CSS).

If you are using the WooCommerce display results method, on the General Settings tab you should select to Auto Detect the Category. You will also need both Auto Count settings ON.

On the Display Results tab, you should select to stay within the category pages.

In the form fields, you need to select Hide Empty.

[Anonymous]

Looking good thanks for the info.

Just in case anyone else stumbles across this issue, I achieved it by doing the following:

I added my custom css only to relevant page in elementor.

body.sfajax .elementor-127 .elementor-element.elementor-element-a0f90c5
.elementor-posts-container .elementor-post__thumbnail {
  padding-bottom: 0 !important;
}

Then I created my own function and placed this in my child themes function.php and linked it to my custom js which I placed in the root.

(function ( $ ) {
"use strict";
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
jQuery("body").addClass("sfajax");
});
}(jQuery));

[Trevor]

Then, assuming you made the other changes I suggested in this post:

https://support.searchandfilter.com/forums/topic/filter-current-archive-category/#post-190333

You should also add that field to the form (so the auto detect of the category can work). The field can be hidden with custom CSS.