search

berkanakyurek / select2-bootstrap4-theme

A theme for Select2 v4 and Bootstrap 4
https://berkan52.github.io/select2-bootstrap4-theme/
MIT License
91 stars 41 forks source link

Doesn't support form-control-sm ? #19

Open slammedunc opened 6 years ago

slammedunc commented 6 years ago

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

hhsm95 commented 5 years ago

I think the same.

clarg18 commented 5 years ago

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

slammedunc commented 5 years ago

@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 commented 5 years ago

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

slammedunc commented 5 years ago

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

whendy commented 1 year ago

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 commented 1 year ago

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