some css changes about select2-bootstrap4-theme

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