Search Results for '.select2-container'

[Trevor]

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.

[Anonymous]

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 😉

[Trevor]

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

[Trevor]

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

[Trevor]

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

[Trevor]

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

[Trevor]

I think something like this:

.searchandfilter .select2-container {
  max-width: 200px;
}

[Trevor]

OK, before we move forward on this, can you go to WP Admin -> Search & Filter -> Settings -> JavaScript & CSS -> Combobox Script and change this to Select2.

Let me know when done. FYI this is the complete Select2 stylesheet:

.select2-container {
 box-sizing:border-box;
 display:inline-block;
 margin:0;
 position:relative;
 vertical-align:middle
}
.select2-container .select2-selection--single {
 box-sizing:border-box;
 cursor:pointer;
 display:block;
 height:28px;
 user-select:none;
 -webkit-user-select:none
}
.select2-container .select2-selection--single .select2-selection__rendered {
 display:block;
 padding-left:8px;
 padding-right:20px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap
}
.select2-container .select2-selection--single .select2-selection__clear {
 position:relative
}
.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
 padding-right:8px;
 padding-left:20px
}
.select2-container .select2-selection--multiple {
 box-sizing:border-box;
 cursor:pointer;
 display:block;
 min-height:32px;
 user-select:none;
 -webkit-user-select:none
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
 display:inline-block;
 overflow:hidden;
 padding-left:8px;
 text-overflow:ellipsis;
 white-space:nowrap
}
.select2-container .select2-search--inline {
 float:left
}
.select2-container .select2-search--inline .select2-search__field {
 box-sizing:border-box;
 border:none;
 font-size:100%;
 margin-top:5px;
 padding:0
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
 -webkit-appearance:none
}
.select2-dropdown {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px;
 box-sizing:border-box;
 display:block;
 position:absolute;
 left:-100000px;
 width:100%;
 z-index:1051
}
.select2-results {
 display:block
}
.select2-results__options {
 list-style:none;
 margin:0;
 padding:0
}
.select2-results__option {
 padding:6px;
 user-select:none;
 -webkit-user-select:none
}
.select2-results__option[aria-selected] {
 cursor:pointer
}
.select2-container--open .select2-dropdown {
 left:0
}
.select2-container--open .select2-dropdown--above {
 border-bottom:none;
 border-bottom-left-radius:0;
 border-bottom-right-radius:0
}
.select2-container--open .select2-dropdown--below {
 border-top:none;
 border-top-left-radius:0;
 border-top-right-radius:0
}
.select2-search--dropdown {
 display:block;
 padding:4px
}
.select2-search--dropdown .select2-search__field {
 padding:4px;
 width:100%;
 box-sizing:border-box
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
 -webkit-appearance:none
}
.select2-search--dropdown.select2-search--hide {
 display:none
}
.select2-close-mask {
 border:0;
 margin:0;
 padding:0;
 display:block;
 position:fixed;
 left:0;
 top:0;
 min-height:100%;
 min-width:100%;
 height:auto;
 width:auto;
 opacity:0;
 z-index:99;
 background-color:#fff;
 filter:alpha(opacity=0)
}
.select2-hidden-accessible {
 border:0!important;
 clip:rect(0 0 0 0)!important;
 height:1px!important;
 margin:-1px!important;
 overflow:hidden!important;
 padding:0!important;
 position:absolute!important;
 width:1px!important
}
.select2-container--classic .select2-results>.select2-results__options,.select2-container--default .select2-results>.select2-results__options {
 max-height:200px;
 overflow-y:auto
}
.select2-container--default .select2-selection--single {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
 color:#444;
 line-height:28px
}
.select2-container--default .select2-selection--single .select2-selection__clear {
 cursor:pointer;
 float:right;
 font-weight:700
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
 color:#999
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
 height:26px;
 position:absolute;
 top:1px;
 right:1px;
 width:20px
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
 border-color:#888 transparent transparent;
 border-style:solid;
 border-width:5px 4px 0;
 height:0;
 left:50%;
 margin-left:-4px;
 margin-top:-2px;
 position:absolute;
 top:50%;
 width:0
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
 float:left
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
 left:1px;
 right:auto
}
.select2-container--default.select2-container--disabled .select2-selection--single {
 background-color:#eee;
 cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
 display:none
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
 border-color:transparent transparent #888;
 border-width:0 4px 5px
}
.select2-container--default .select2-selection--multiple {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:text
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
 box-sizing:border-box;
 list-style:none;
 margin:0;
 padding:0 5px;
 width:100%
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
 list-style:none
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
 color:#999;
 margin-top:5px;
 float:left
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
 cursor:pointer;
 float:right;
 font-weight:700;
 margin-top:5px;
 margin-right:10px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
 background-color:#e4e4e4;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:default;
 float:left;
 margin-right:5px;
 margin-top:5px;
 padding:0 5px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
 color:#999;
 cursor:pointer;
 display:inline-block;
 font-weight:700;
 margin-right:2px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
 color:#333
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder {
 float:right
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
 margin-left:5px;
 margin-right:auto
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
 margin-left:2px;
 margin-right:auto
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
 border:1px solid #000;
 outline:0
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
 background-color:#eee;
 cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
 display:none
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
 border-top-left-radius:0;
 border-top-right-radius:0
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
 border-bottom-left-radius:0;
 border-bottom-right-radius:0
}
.select2-container--default .select2-search--dropdown .select2-search__field {
 border:1px solid #aaa
}
.select2-container--default .select2-search--inline .select2-search__field {
 background:0 0;
 border:none;
 outline:0;
 box-shadow:none;
 -webkit-appearance:textfield
}
.select2-container--default .select2-results__option[role=group] {
 padding:0
}
.select2-container--default .select2-results__option[aria-disabled=true] {
 color:#999
}
.select2-container--default .select2-results__option[aria-selected=true] {
 background-color:#ddd
}
.select2-container--default .select2-results__option .select2-results__option {
 padding-left:1em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
 padding-left:0
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-1em;
 padding-left:2em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-2em;
 padding-left:3em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-3em;
 padding-left:4em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-4em;
 padding-left:5em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-5em;
 padding-left:6em
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
 background-color:#5897fb;
 color:#fff
}
.select2-container--default .select2-results__group {
 cursor:default;
 display:block;
 padding:6px
}
.select2-container--classic .select2-selection--single {
 background-color:#f7f7f7;
 border:1px solid #aaa;
 border-radius:4px;
 outline:0;
 background-image:-webkit-linear-gradient(top,#fff 50%,#eee 100%);
 background-image:-o-linear-gradient(top,#fff 50%,#eee 100%);
 background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}
.select2-container--classic .select2-selection--single:focus {
 border:1px solid #5897fb
}
.select2-container--classic .select2-selection--single .select2-selection__rendered {
 color:#444;
 line-height:28px
}
.select2-container--classic .select2-selection--single .select2-selection__clear {
 cursor:pointer;
 float:right;
 font-weight:700;
 margin-right:10px
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
 color:#999
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
 background-color:#ddd;
 border:none;
 border-left:1px solid #aaa;
 border-top-right-radius:4px;
 border-bottom-right-radius:4px;
 height:26px;
 position:absolute;
 top:1px;
 right:1px;
 width:20px;
 background-image:-webkit-linear-gradient(top,#eee 50%,#ccc 100%);
 background-image:-o-linear-gradient(top,#eee 50%,#ccc 100%);
 background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
 border-color:#888 transparent transparent;
 border-style:solid;
 border-width:5px 4px 0;
 height:0;
 left:50%;
 margin-left:-4px;
 margin-top:-2px;
 position:absolute;
 top:50%;
 width:0
}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear {
 float:left
}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
 border:none;
 border-right:1px solid #aaa;
 border-radius:4px 0 0 4px;
 left:1px;
 right:auto
}
.select2-container--classic.select2-container--open .select2-selection--single {
 border:1px solid #5897fb
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
 background:0 0;
 border:none
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
 border-color:transparent transparent #888;
 border-width:0 4px 5px
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
 border-top:none;
 border-top-left-radius:0;
 border-top-right-radius:0;
 background-image:-webkit-linear-gradient(top,#fff 0,#eee 50%);
 background-image:-o-linear-gradient(top,#fff 0,#eee 50%);
 background-image:linear-gradient(to bottom,#fff 0,#eee 50%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
 border-bottom:none;
 border-bottom-left-radius:0;
 border-bottom-right-radius:0;
 background-image:-webkit-linear-gradient(top,#eee 50%,#fff 100%);
 background-image:-o-linear-gradient(top,#eee 50%,#fff 100%);
 background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
}
.select2-container--classic .select2-selection--multiple {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:text;
 outline:0
}
.select2-container--classic .select2-selection--multiple:focus {
 border:1px solid #5897fb
}
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
 list-style:none;
 margin:0;
 padding:0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
 display:none
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
 background-color:#e4e4e4;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:default;
 float:left;
 margin-right:5px;
 margin-top:5px;
 padding:0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
 color:#888;
 cursor:pointer;
 display:inline-block;
 font-weight:700;
 margin-right:2px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
 color:#555
}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice {
 float:right;
 margin-left:5px;
 margin-right:auto
}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
 margin-left:2px;
 margin-right:auto
}
.select2-container--classic.select2-container--open .select2-selection--multiple {
 border:1px solid #5897fb
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
 border-top:none;
 border-top-left-radius:0;
 border-top-right-radius:0
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
 border-bottom:none;
 border-bottom-left-radius:0;
 border-bottom-right-radius:0
}
.select2-container--classic .select2-search--dropdown .select2-search__field {
 border:1px solid #aaa;
 outline:0
}
.select2-container--classic .select2-search--inline .select2-search__field {
 outline:0;
 box-shadow:none
}
.select2-container--classic .select2-dropdown {
 background-color:#fff;
 border:1px solid transparent
}
.select2-container--classic .select2-dropdown--above {
 border-bottom:none
}
.select2-container--classic .select2-dropdown--below {
 border-top:none
}
.select2-container--classic .select2-results__option[role=group] {
 padding:0
}
.select2-container--classic .select2-results__option[aria-disabled=true] {
 color:grey
}
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
 background-color:#3875d7;
 color:#fff
}
.select2-container--classic .select2-results__group {
 cursor:default;
 display:block;
 padding:6px
}
.select2-container--classic.select2-container--open .select2-dropdown {
 border-color:#5897fb
}

Let’s say I wanted to override something in the first block of this CSS, which is this:

.select2-container {
 box-sizing:border-box;
 display:inline-block;
 margin:0;
 position:relative;
 vertical-align:middle
}

Let’s change the margin to 5px:

.searchandfilter .select2-container {
 margin: 5px;
}

See how I added .searchandfilter to it? That makes my new CSS more specific. Of course, you have to place such code in to your theme, the theme customizer or a plugin like Simple Custom CSS.

[Trevor]

Are these comboboxes? If so, are you using the Select2 script (it is in settings for Search & Filter.

This custom CSS should cause the text to wrap with select2 comboboxes (or CSS like it):

.select2-container .select2-selection--multiple .select2-selection__choice {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

[Trevor]

Ah, OK, then you might need to do this:

.select2-container .select2-search--inline {
  line-height: 36px !important;
}
.searchandfilter ul li li {
  padding: 0 !important;
}