Search Results for '.select2-container'

[Roy Haverkotte]

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%;
}

Add New Note to this Reply

[Roy Haverkotte]

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;
}

Add New Note to this Reply

[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.

Add New Note to this Reply

[Inventflow B.V.]

This reply has been marked as private.

Add New Note to this Reply

[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%;
}

Add New Note to this Reply

[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%;
}

Add New Note to this Reply

[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.

Add New Note to this Reply

[Wim Bax]

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

Add New Note to this Reply

[Onur Öneren]

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/

Add New Note to this Reply

[Cecilia Arditto]

This reply has been marked as private.

Add New Note to this Reply