some css changes

[morrow95]

Just came across your css today and will be using it from now on. I did make a few changes after going through it... some specific to my own project, but might be useful. If anything, the validation focus additions I made should be added to the project.

/*CUSTOM SELECT2 STUFF GOES HERE*/
/*for everything to be correct font-size*/
.select2-container--bootstrap4 {
    font-size: $font-size-base !important;
}

/*search field*/
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
	padding-left: calc(.5rem - 1px);
	padding-right: .5rem;
}

/*results for current rendered selection*/
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	padding-left: $input-padding-x;
	padding-right: $input-padding-x;
}

/*dropdown*/
.select2-container--bootstrap4 .select2-dropdown {
	z-index:$zindex-dropdown; /*z-index 1000*/
}

/*dropdown results for items*/
.select2-container--bootstrap4 .select2-results__option {
	padding-left: $input-padding-x;
	padding-right: $input-padding-x;
}

/*dropdown results for optgroup titles*/
.select2-container--bootstrap4 .select2-results__group {
	padding-left: $input-padding-x;
	padding-right: $input-padding-x;
	background-color: $gray-100;
}

/*dropdown results for nested items (like in optgroups)*/
.select2-container--bootstrap4 .select2-results__options--nested .select2-results__option {
    padding-left: calc(#{$input-padding-x + .75rem});
    padding-right: $input-padding-x;
}

/*dropdown selected*/
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
	background-color: lighten($primary, 47%);
	color: #333;
}

/*dropdown hover*/
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-dropdown .select2-results__option--highlighted[aria-selected=true] /*comment this line out to not highlight selected item*/ {
	background-color: $primary;
	color: #fff;
}

/*dropdown arrow color*/
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
	border-color: $gray-500 transparent transparent transparent;
}

/*validation focus*/
select.is-invalid ~ .select2-container--bootstrap4 .select2-selection {
    box-shadow: 0 0 0 $input-btn-focus-width rgba($danger, .25);
}
select.is-valid ~ .select2-container--bootstrap4 .select2-selection {
	box-shadow: 0 0 0 $input-btn-focus-width rgba($success, .25);
}

[ttskch]

@morrow95 Thanks for your feedback. But this is just your own project specific customization, isn't this? Or are there any general problems?

[drjele]

@ttskch i also had to change the rules a bit. the variables used by @morrow95 are from bootstrap.
this is my full code:

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

@import '~select2';

@import '~@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.css';

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered
{
display: block !important;
padding: 0 $input-padding-x calc(#{$input-padding-y} - 1px) $input-padding-x !important;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice
{
margin-top: calc(#{$input-padding-y} - 1px);
}

.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection
{
border-bottom: 1px solid $gray-400 !important;
}

[ttskch]

@drjele I don't know why your modifications are needed. Could you please show some problem reproducing html?

[drjele]

my modifications fix two things for a multiple select with ajax:

• i see a black line at the bottom when the choice list disapears, only during the transition.
• when i select the first option the row height of the select2 control grows by one pixel.

i posted my modifications just to show that what @morrow95 says it is posible and useful .. to use the variables from the bootstrap scss, since most people using this theme also use the bootstrap css.

and one more trick .. you can create a file with all the imports and than use that where you need it.

[fabiocaccamo]

@morrow95 thanks for your fix, I also added:

This fix border and radius between search input and results list.

.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

and this make the select more responsive:

.select2-container--bootstrap4 {
    font-size: $font-size-base !important;
    width: 100% !important;
}