Search Results for '.searchandfilter custom css'

[Trevor]

You can use custom CSS to hide the radio button, and further custom CSS top show the term has been selected. Is that what you mean?

I would need to see the form to be able to give specifics (which you tell me I cannot), but this post shows some CSS I wrote for another user with a similar request:

https://support.searchandfilter.com/forums/topic/submit-and-reset-buttons-are-gray-no-text/#post-223876

[Trevor]

The cursor is called the ‘not-allowed’ cursor and comes from this theme file:

https://www.ia-incosmetics.com/wp-content/themes/xstore/css/bootstrap.min.css?ver=1.0

This is the CSS:

input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"].disabled, input[type="checkbox"].disabled, fieldset[disabled] input[type="radio"], fieldset[disabled] input[type="checkbox"] {
    cursor: not-allowed;
}

So, add this CSS to stop this I think, in our form:

.searchandfilter input[type="radio"][disabled],
.searchandfilter input[type="checkbox"][disabled],
.searchandfilter input[type="radio"].disabled,
.searchandfilter input[type="checkbox"].disabled {
    cursor: default;
}

You need to add this somewhere in custom css for your theme.

[Trevor]

Are you coding you own PHP template, or using our shortcode method?

For the demo, our developer, Ross, extended the Twenty Seventeen theme by making a child theme to help with the layout etc

We can share this with you:

https://drive.google.com/file/d/1GAJBInV2Mty8pHdNkj061SySPRHGEMEe/view?usp=sharing

Just to note, the templates (archive-sfdc_movie.php) are dependent on the post types that he used to create the demo (in this case sfdc_movie) and the specific custom fields / taxonomies etc he created for this demo.

Also, the results are displayed using post type archive display method.

Take a look at the code in either that or the parent Twenty Seventeen theme files.

The stylesheet (in addition to that of our plugin and the theme) is in this file:

https://demo.searchandfilter.com/wp-content/themes/twentyseventeen-child/style.css

[Trevor]

Can you try this custom CSS:

.searchandfilter >ul > li[data-sf-field-input-type="select"] > label {
  max-width: 100%;
}

Some further adjustment may be needed.

[Trevor]

On the appearance of the form, this custom CSS should override your theme:

.widget .textwidget .searchandfilter ul li {
  list-style: none;
  display: block;
}
.widget .textwidget .searchandfilter ul {
  margin: 0px;
}
.searchandfilter input.sf-input-checkbox[type="checkbox"] {
  vertical-align: top;
  margin-top: 4px;
}
.searchandfilter li[data-sf-field-input-type=checkbox] label {
  width: calc(100% - 32px);
}

[Trevor]

To answer the second question first, it is Elementor and Post Grid that handle the ‘No Results’ logic, and they cannot do that, sorry.

To the buttons. There is some CSS making the text color transparent, but I cannot see where it is coming from. You will need to add some custom CSS in the Theme Customizer, like this:

.searchandfilter input[type=submit] {
  color: #333;
}

I think that the Ajax Container, currently set to #main is wrong.

Are you trying to make an alphabet (a-z) selection? There are ways to make this so you have only the letter tiles.

[Trevor]

If you use this additional custom CSS, does it look better:

.wpb_text_column .searchandfilter ul {
  padding-left: 0;
  margin-top: 0px;
}
.searchandfilter {
  padding: 20px 0px;
}
.searchandfilter .sf_date_field li:first-child {
  padding-top: 0px;
}
.searchandfilter .sf_date_field li:last-child {
  padding-bottom: 0px;
}
.searchandfilter .sf-field-submit:before {
  content: "";
  display: block;
  height: 35px;
}
.searchandfilter > ul {
  display: table;
}
.wpb_text_column .searchandfilter > ul {
  margin-left: auto;
  margin-right: auto;
}

[Anonymous]

I added this code to

appearance -> Custom CSS / JS

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.init();
	});
	
}(jQuery));

[Trevor]

You want the choices formatted like this?

https://www.screencast.com/t/1bgCftYgMBw

It is possible with Custom CSS, yes. I can help you when you get that far.

Custom Fields are called ‘Post Meta’, so add one of these to the form, then, for the Meat Key name, make sure NOT to select the field name starting with an underscore _. Find the alternative without that. This advice applies ONLY to ACF custom fields.

I also see you are using Elementor, so this post may be useful:

https://support.searchandfilter.com/forums/topic/how-can-i-search-elemntor-column-while-retaining-the-design-of-that-column/#post-209754

[Trevor]

When I first visit the page I see this:

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

(Wrong font sixes)

If I add this CSS:

.searchandfilter>ul>li span {
  font-size: 16px
}

It looks OK now I think? Can you add that to your theme custom CSS?

Is it the text ‘Facilitation Tips’ that wrap that is the issue:

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

If so, maybe this Custom CSS:

.searchandfilter .select2-results__option {
  white-space: nowrap;
}
.searchandfilter .select2-container {
  min-width: 170px;
}