Search Results for '.select2-container'

[Anonymous]

Hi,

My filtering form has some CSS problem. Please check the below link:
https://www.lightemsystems.com/telecom-datacom-systems/industrial-switch/

Post per page i.e. View dropdown is not same as other dropdown design.
CSS code I used:

.searchandfilter > ul > li {
display: inline-block;
margin-right: 15px;
float: left;
}
.searchandfilter[data-sf-form-id=”10523″] select,
.select2-container .select2-results__option,
.searchandfilter[data-sf-form-id=”10523″] .select2-container–default .select2-selection–single .select2-selection__rendered {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: grey;
border-color: grey;
}
.searchandfilter >ul > li input[type=submit] {
background-color: #1569ae; /* Blue */
border: 4px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
font-size: 12px;
}

Please help me.

[Trevor]

This should start you on your way:

.searchandfilter[data-sf-form-id="971"] li.sf-field-search input {
  padding: 1.5px 10px;
}
.searchandfilter[data-sf-form-id="971"] > ul > li,
.searchandfilter[data-sf-form-id="971"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="971"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="971"] .select2-container {
  min-width: 245px;
  float: left;
}
.searchandfilter[data-sf-form-id="971"] > ul {
  display: table;
}
.searchandfilter[data-sf-form-id="971"] li.sf-field-submit {
    clear: both;
}

Note that you have some CSS you already made:

input.sf-input-text {
    background-color: white;
    border: 1px solid #aaa !important;
    margin-top: 3px;
    font-size: 14px;
}

The font-size and margin-top in that block may need to be removed. It may also be that you need to place the CSS in a media query to apply only to desktop, but this should get you started. This is really outside the scope of our normal support, so if you need more doing, you may need to hire a third party coder to help you.

[Trevor]

Could you first change the combobox script to Select2 (there is an option in our settings page to choose which Combobox script to use). Your current form uses Chosen, which is set within our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.

Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.

This custom CSS might then do it for you:

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

Please note that we are now into an extended public holiday weekend (Friday to Monday inclusive) here in the UK. We may be working for some of this period, but replies may be delayed at times.

[Trevor]

I think it would be like this:

.searchandfilter[data-sf-form-id="13155"] .sf-field-taxonomy-partysize .select2-container {
  max-width: 150px;
}

[Trevor]

If there is no other place to add custom CSS in your theme, then Customize – Additional CSS will suffice.

I think this is it then:

.searchandfilter[data-sf-form-id="2703"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="2703"] > ul > li:first-child {
  margin-left: 0;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search h4 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 3px;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] h4 {
  font-size: 16px;
  font-weight:600;
  color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] select,
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="2703"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: black;
  font-size: 14px;
}
.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%;
}
.searchandfilter[data-sf-form-id="2703"] > ul {
  margin: 20px;
  border: 1px solid #02213d;
  padding: 15px;
  background: #f3f3f3;
}
.searchandfilter[data-sf-form-id="2703"] .meta-slider {
  max-width: calc(100% - 12px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider label  {
  width: calc(50% - 9px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider input {
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  color: #000;
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-selection,
.select2-container--open .select2-dropdown--above {
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container, .select2-container--open {
  font-size: 14px;
  color: #000;
}
.select2-container--open .select2-search--dropdown .select2-search__field {
  border-color: #02213d;
}

[Trevor]

Could you try this custom CSS:

.select2-container--open {
    position: fixed !important;
    z-index: 9999;
}
.select2-container--focus {
    position: relative !important
}

[Trevor]

This Custom CSS is my first hit at it:

.searchandfilter[data-sf-form-id="2703"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="2703"] > ul > li:first-child {
  margin-left: 0;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search h4 {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 3px;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] h4 {
  font-size: 18px;
  font-weight:600;
}
.searchandfilter[data-sf-form-id="2703"] select,
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="2703"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: black;
  font-size: 14px;
}
.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%;
}
.searchandfilter[data-sf-form-id="2703"] > ul {
  margin: 20px;
  border: 1px solid #002f60;
  padding: 15px;
}
.searchandfilter[data-sf-form-id="2703"] .meta-slider {
  max-width: calc(100% - 12px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider label  {
  width: calc(50% - 9px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider input {
  width: 100%;
  max-width: 100%;
}

However. The following need specifying:

font colors for each field
font sizes for each field
border colors for the form and fields

[Trevor]

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

[Trevor]

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

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