This reply has been marked as private.
I had to comment out all the custom CSS you made, so can you remove all of that?
#3 Change background color to what? Inside and outside the black boxed area? I assumed for now you wanted it white and to the whole form.
This is the CSS I made:
.searchandfilter[data-sf-form-id="289"] select.sf-input-range-select {
border: 1px solid #aaa;
padding: 2px 0;
border-radius: 4px;
}
.searchandfilter[data-sf-form-id="289"] > ul > li:first-child {
margin-left: 0;
}
.searchandfilter[data-sf-form-id="289"] > ul > li {
margin-left: 25px;
float:left;
}
.searchandfilter[data-sf-form-id="289"] {
background: #fff;
display: table;
padding: 15px;
}
.searchandfilter[data-sf-form-id="289"] h4 {
color: red;
font-family: "Montserrat", Sans-serif;
font-size: 18px
}
.searchandfilter[data-sf-form-id="289"] select,
.select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="289"] .select2-container--default .select2-selection--single .select2-selection__rendered {
color: green;
font-family: "Montserrat", Sans-serif;
font-size: 14px;
}
I see the issue now. Do you have the facility in your theme for adding Custom CSS?
Changing the combobox script to Select2 then needs some custom CSS:
.select2-container {
z-index: 9999999999;
}
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;
}
Try this custom CSS:
.searchandfilter > ul > li,
.searchandfilter > ul > li > label,
.searchandfilter .select2-container,
.searchandfilter .select2-container--default .select2-selection--multiple {
min-width: 250px;
}
Or whatever width you need.
Thanks a lot Trevor. I had to adjust a bit your code in order to make it look ok on any screen dimension up to 767px, like so:
.select2-container {
left: auto !important;
}
.select2-container--open .select2-dropdown {
left: 2% !important;
margin-left: 11px;
}
It was very tricky, thanks again 😉
Can you try this custom CSS? It might break things though, so beware:
.select2-container {
left: auto !important;
}
.select2-container--open .select2-dropdown {
left: 22px !important;
}
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;
}
Where you have this:
.searchandfilter .select2-container--default .select2-selection--single {
border-radius: 7px;
height: 40px;
}
Make it this:
.searchandfilter .select2-container--default .select2-selection--single {
border-radius: 7px;
height: 40px;
position: relative;
top: -2px;
}
Try this:
.searchandfilter .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 50px;
}
.searchandfilter .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 50px;
}
.searchandfilter .select2-container--default .select2-selection--single {
border-radius: 7px;
height: 50px;
}
