search

apalfrey / select2-bootstrap-5-theme

A Select2 v4 theme for Bootstrap 5
https://apalfrey.github.io/select2-bootstrap-5-theme/
MIT License
212 stars 48 forks source link

Does not work "select2--small" #57

Closed Knyaz71 closed 2 years ago

Knyaz71 commented 2 years ago

Не работает 

// Small using Select2 properties
$("#form-select-sm").select2({
    theme: "bootstrap-5",
    selectionCssClass: "select2--small", // For Select2 v4.1
    dropdownCssClass: "select2--small",
});

Приходится переписывать CSS

.select2-container--bootstrap-5 .select2--small ~ .select2-selection ******

на

.select2-container--bootstrap-5 .select2--small.select2-selection ******
fulviocanducci commented 2 years ago

@Knyaz71 Как вы решили эту проблему, у меня тоже не работает эта конфигурация?

Knyaz71 commented 2 years ago

@fulviocanducci, добавил в свой .css следующее. Не знаю все ли из этого надо, но, вроде, работает.

.select2-container--bootstrap-5 .select2--small.select2-selection {
    min-height: calc(1.5em + (0.5rem + 2px));
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0.125rem 0.125rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__clear:hover,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear:hover {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-search .select2-search__field {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
    padding: 0.25rem 0.25rem;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
    padding: 0.25rem 0.5rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--single {
    padding: 0.25rem 2.25rem 0.25rem 0.5rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered:not(:empty) {
    padding-bottom: 0.25rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    padding: 0.35em 0.65em;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0.125rem 0.125rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear {
    right: 0.5rem;
}
fulviocanducci commented 2 years ago

@Knyaz71

Спасибо

fulviocanducci commented 2 years ago

@fulviocanducci, добавил в свой .css следующее. Не знаю все ли из этого надо, но, вроде, работает.

.select2-container--bootstrap-5 .select2--small.select2-selection {
    min-height: calc(1.5em + (0.5rem + 2px));
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0.125rem 0.125rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__clear:hover,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear:hover {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-search .select2-search__field {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
    padding: 0.25rem 0.25rem;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
    padding: 0.25rem 0.5rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--single {
    padding: 0.25rem 2.25rem 0.25rem 0.5rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered:not(:empty) {
    padding-bottom: 0.25rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    padding: 0.35em 0.65em;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0.125rem 0.125rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear {
    right: 0.5rem;
}

@Knyaz71

Это сработало очень хорошо, и большое спасибо

apalfrey commented 2 years ago

Ah yeah, I see the issue. I've got a fix in place ready to go, just doing some testing on it first.

Knyaz71 commented 2 years ago

Ah yeah, I see the issue. I've got a fix in place ready to go, just doing some testing on it first.

Yes thanks, it works for me

sdelfi commented 2 years ago

Ah yeah, I see the issue. I've got a fix in place ready to go, just doing some testing on it first.

Thanks. When are you planning to release this fixes?

apalfrey commented 2 years ago

Release is out now!