Changing the design of the search form

Anonymous

#255767

This reply has been marked as private.

Trevor

#255779

To remove the search box on the fields, change them back to normal dropdown selects, and see this post (some of the suggestions I think you have done already):

https://support.searchandfilter.com/forums/topic/css-dropdown-option-active-hover/#post-249903

As to the font color, there should be some CSS snippets in this forum search that will help you:

https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id+color+select2/

I am not sure what you mean by “I would also like the arrow like I have right now instead of the ‘plus’ and ‘minus’ signs.” You already have dropdown arrows?

Anonymous

#255780

This reply has been marked as private.

Trevor

#255783

This reply has been marked as private.

Anonymous

#255784

This reply has been marked as private.

Trevor

#255846

To me it does not look like you applied this JavaScript code to the page:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2({minimumResultsForSearch: -1});
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2({minimumResultsForSearch: -1});
});
</script>

Which would apply select2 to those boxes, without the search box at the top of each.

Anonymous

#255910

This reply has been marked as private.

Trevor

#255916

What theme or page builder are you using? Do that have a HTML block/widget you can add to the page? You could put it inside one of those. Failing that, use a plugin like this:

https://wordpress.org/plugins/tc-custom-javascript/

Anonymous

#255925

This reply has been marked as private.

Trevor

#255932

The code needed to make it 100% wide is a modification of what you already have, this bit:

.searchandfilter[data-sf-form-id=”2703″] li.sf-field-search input,
.searchandfilter[data-sf-form-id=”2703″] li.sf-field-search label,
.searchandfilter[data-sf-form-id=”2703″] .select2-container {
min-width: 100%;
}

Needs to be:

.searchandfilter[data-sf-form-id="2703"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="2703"] li[data-sf-field-input-type="select"] .select2-container,
.searchandfilter[data-sf-form-id="2703"] li[data-sf-field-input-type="select"] label {
  min-width: 100% !important;
  width: 100% !important;
}

You have set the font in some places in your code to black, e.g.:

.searchandfilter[data-sf-form-id=”2703″] .select2-container, .select2-container–open {
font-size: 14px;
color: #000;
}

It is here that the font and font color may need to be set.

[Author]

Posts