Doesn't support form-control-sm ?

[slammedunc]

I think it needs to be updated to support form-control-sm instead of input-sm?

[hhsm95]

I think the same.

[clarg18]

Did either of you find a solution to this? @adeoy @slammedunc

[slammedunc]

@Glendog I added the following to my css file:

/* force select2 to match bootstrap form-control-sm */ .select2, .select2-selection__rendered { line-height: calc(1.5em + .5rem + 2px) !important; } .select2-container .select2-selection--single { height: calc(1.5em + .5rem + 2px) !important; } .select2-selection__arrow { height: calc(1.5em + .5rem + 2px) !important; }

[VictorioBerra]

@slammedunc Can you test on all browsers and then PR that please?

[slammedunc]

@VictorioBerra sorry should have said I'm not using this theme (or any other) just the above

[whendy]

I use some trick and add more additional css tyle. Used on js:

$('.select2InitB4-sm',document).select2({
    placeholder: "--Select--",
    allowClear: true,
    theme: 'bootstrap4',
    width: '100%',
    containerCssClass: 'form-control-sm'
});
$('.select2InitB4',document).select2({
    placeholder: "--Select--",
    allowClear: true,
    theme: 'bootstrap4',
    width: '100%'
});

add some css style

/* force select2 to match bootstrap form-control-sm */
.select2-container--bootstrap4 .select2-selection--single.form-control-sm .select2-selection__placeholder {
    color: #757575;
    line-height: 1.25rem;
}
.select2-container--bootstrap4 .select2-selection--single.form-control-sm .select2-selection__rendered {
    line-height: 1.25rem;
}
.select2-container--bootstrap4 .select2-selection--single.form-control-sm {
    height: calc(1.25rem + 11px)!important;
}
.select2-container--bootstrap4 .select2-selection--single.form-control-sm .select2-selection__clear {
    margin-top: 0.1em!important;
    margin-right: 0!important;
}

[lkonsam]

I add this css. Use combining the both .form-select-sm

 .select2-container--bootstrap-5 .select2-dropdown .select2-results__options  .select2-results__option, .select2-search__field {
    min-height: calc(1.5em + .5rem + 2px) !important;
    padding: .25rem .5rem  !important;
    font-size: .875rem  !important;
}