Search Results for '.select2-container'

[Anonymous]

Hi Trevor, no also to those sites. Here are the images.

This one is my current. I am posting CSS Below. Found it here in the forum.

Below fotoshop is what i would like to achieve. original source is:
https://www.findeq.eu/stock-like-sjh-allplant

First row 1 search bar.
2nd 3 pulldown menu
3th 3 sliders
4th some download and info.

Colors also like in this screenshot. Width like in findeq as machine pictures.

CSS as i have now:

.searchandfilter[data-sf-form-id=”2918″] {
padding: 20px;
}
.searchandfilter[data-sf-form-id=”2918″] > ul {
margin: 0;
}
.searchandfilter[data-sf-form-id=”2918″] li.sf-field-search input,
.searchandfilter[data-sf-form-id=”2918″] li.sf-field-search label,
.searchandfilter[data-sf-form-id=”2918″] li[data-sf-field-input-type=”select”] label,
.searchandfilter[data-sf-form-id=”2918″] li[data-sf-field-input-type=”select”] select,
.searchandfilter[data-sf-form-id=”2918″] li[data-sf-field-input-type=”daterange”] label,
.searchandfilter[data-sf-form-id=”2918″] .select2-container {
min-width: 100%;
}

[Anonymous]

Hello,

I am looking for a way to get a top filterbox with sliders and pulldown menu`s like see attached image.
Spent days reading here and tried many things but can not get it to work as it should.

Any advise and help would be great.

My site, Findeq

I like to have something like on this site:
SJH allplant stock

Regards,

Roy

CSS Used till now :

.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
.searchandfilter[data-sf-form-id=”2918″] select.sf-input-range-select {
border: 1px solid #aaa;
padding: 2px 0;
border-radius: 4px;
}
.searchandfilter[data-sf-form-id=”2918″] > ul > li:first-child {
margin-left: 0;
padding-top: 0;
}
.searchandfilter[data-sf-form-id=”2918″] li.sf-field-search h4 {
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
padding-top: 0;
}
.searchandfilter[data-sf-form-id=”2918″] h4 {
font-size: 10px;
font-weight:400;
color: #02213d;
}
.searchandfilter[data-sf-form-id=”2918″] select,
.searchandfilter[data-sf-form-id=”2918″] .select2-container .select2-results__option,
.searchandfilter[data-sf-form-id=”2918″] .select2-container–default .select2-selection–single .select2-selection__rendered {
color: green;
font-size: 10px;
}
.searchandfilter[data-sf-form-id=”2918″] select.sf-input-select {
min-width: auto;
}.searchandfilter[data-sf-form-id=”2918″] li.sf-field-search input,
.searchandfilter[data-sf-form-id=”2918″] li.sf-field-search label,
.searchandfilter[data-sf-form-id=”2918″] .select2-container {
max-width: 100%;
}
.searchandfilter[data-sf-form-id=”2918″] > ul {
margin: 20px;
border: 1px solid #02213d;
padding: 75px;
background: #f3f3f3;
}
.searchandfilter[data-sf-form-id=”2918″] .meta-slider {
max-width: calc(100% – 10px);
}
.searchandfilter[data-sf-form-id=”2918″] li .sf-meta-range.sf-meta-range-slider label {
width: calc(50% – 9px);
}
.searchandfilter[data-sf-form-id=”2918″] li .sf-meta-range.sf-meta-range-slider input {
width: 100%;
max-width: 100%;
font-size: 10px;
color: #000;
border-color: #02213d;
}
.searchandfilter[data-sf-form-id=”2918″] .select2-container .select2-selection,
.select2-container–open .select2-dropdown–above {
border-color: #02013d;
}
.searchandfilter[data-sf-form-id=”2918″] .select2-container, .select2-container–open {
font-size: 10px;
color: #000;
}
.select2-container–open .select2-search–dropdown .select2-search__field {
border-color: #02213d;
}

[Trevor]

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.

[Trevor]

Try adding this additional CSS:

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

[Trevor]

I think this custom CSS makes it look better?

.searchandfilter[data-sf-form-id="5450"] {
  padding: 20px;
}
.searchandfilter[data-sf-form-id="5450"] > ul {
  margin: 0;
}
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="daterange"] label,
.searchandfilter[data-sf-form-id="5450"] .select2-container {
  min-width: 100%;
}

[Trevor]

You will 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.

Next, in the form field settings, select the combobox option for each.

Then, you will need to add a script to enable hover. There is no fixed way to do this, so this is the best generic solution I can find:

$(document).on('mouseenter', '.select2-container', function(e) {
    $(this).prev("select").select2("open");
});

$(document).on('mouseleave', '.select2-container .select2-dropdown', function(e) {
    var selectId = $(this).find("ul").attr('id').replace("select2-", "").replace("-results", "");
    $("#"+selectId).select2("close");
});

You would most likely use a plugin to add the script:

https://wordpress.org/plugins/custom-css-js/

I have not tested this, so it might need some fine tuning.

[Anonymous]

Hello , I am back
As I wrote the code you provided gave no response at all.
I am looking for a layout like
item 1 item 4 item 7 item 10
item 2 item 5 item 8 item 11
item 3 item 6 item 9 item 12

I tried to find which code had any effect on the combo box.

I added in the css of the elementor seach & Filter Form the following css

selector .searchfilter .select2-container–classic .select2-results>.select2-results__options, .select2-container–default .select2-results>.select2-results__options {
max-height: 300px;
overflow-y: auto;

}
This code increased the height of the combobox.
But now the question is how to make this into a multi-column and of course a box with the appropiate width.
Regards
Wim Bax

[Anonymous]

Hi,
the serach&filter function is great while the styling of the filters lacks usability & valueable options!

I have multiple filters horizontal filter set up (1) in one search form, acf group fields in place and no nested taxonomies (2) and try to place them via (3) and use the searchform via shortcode inside elemtor pro.

Given I check “Hide empty items?” in searchfilter Admin settings, then in the front-end after each filter change all filters “jump” around (accordingly to the fact, that option are lower) => this makes them uncontrolable with regards to styling.
=> unhide empty items would fix the jumping but will be an ux mess (& not the intention)
Question:
– Is there a way to have the items “hide empty items” checked (not shown in the filter option) but also have the length of the filter field fixed?

Feedback appreciated
Thanks in advance
Onur

btw:
Style of Combobox is nice – but as “date & price range&input fields” don’t have this option, their style won’t go together with the “combobox” – style of txonomy filters – is there a way to style the input fields accordingly?

btw2:
v3 will have fixes for some filter frontend styling lacks?

——-
(1)
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
————
(2) https://support.searchandfilter.com/forums/topic/multiple-categories-combination/#post-55166 – did all of that
————
(3)
.searchandfilter[data-sf-form-id=”1428″] .select2-container {
margin: 5px;
}
from: https://support.searchandfilter.com/forums/search/filter+style/

[Trevor]

A number of issues there. Many of the elements of a form are styled by the browser and the operating system and are not affected by CSS.

As browsers go through regular updates, they change their styling of these things to suit latest ‘fashions’. I noticed recently that Chrome made such a change.

You have Elementor, but not Elementor Pro? I understand one is paid, so not everyone will use it.

If you are making custom CSS, you need to get the specificity correct, otherwise it will not override existing CSS. This means using the browser web developer inspector to see what current selectors in the CSS set a particular attribute, and using that with added specificity, usually like:

.searchandfilter[data-sf-form-id="1428"] .select2-container {
  margin: 5px;
}

So, I would need to see what you are trying to change (a live link/URL), and with what CSS.

[Trevor]

The titles of filters are optionally added by you the designer. It is this setting (which you should leave blank, and, by default, it is blank):

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

You might find the filters better styled if you add the select2 script to them, as described here:

https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

The only other thing I notice is that the fields are all the same width, for which you would need custom and responsive CSS. This search on our forum should give you some snippets to look at:

https://support.searchandfilter.com/forums/search/.select2-container/