Comments (8)
@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;
}
from select2-bootstrap-5-theme.
Ah yeah, I see the issue. I've got a fix in place ready to go, just doing some testing on it first.
from select2-bootstrap-5-theme.
Release is out now!
from select2-bootstrap-5-theme.
@Knyaz71 Как вы решили эту проблему, у меня тоже не работает эта конфигурация?
from select2-bootstrap-5-theme.
Спасибо
from select2-bootstrap-5-theme.
@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; }
Это сработало очень хорошо, и большое спасибо
from select2-bootstrap-5-theme.
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
from select2-bootstrap-5-theme.
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?
from select2-bootstrap-5-theme.
Related Issues (20)
- Floating Label - Multi Select Box HOT 2
- Validation icons HOT 1
- Dark mode HOT 6
- input not focus on mobile (iphone) HOT 4
- select2-bootstrap-5-theme@npm:1.2.0 doesn't provide @popperjs/core (p36ae4), requested by bootstrap HOT 2
- The magnifying glass image and the CSS to display it seem to be missing from all the v4 e v5 themes. HOT 1
- Minor CSS change in Bootstrap 5.2.0 HOT 2
- Comatibility issue with Django-autocomplete-light. Clear button not appearing. HOT 1
- Repo "About"
- Yarn warning with @popperjs/core
- Error after upgrade to "Bootstrap 5.2.3" HOT 1
- Error with BS 5.3.0-aplha1 HOT 12
- Autofocus is not working in [email protected] HOT 2
- SCSS Floating Labels
- select2-bootstrap-5-theme with ajax lost the style HOT 1
- Add pls support dark theme bootstrap 5.3 and floating label HOT 1
- Could someone add support for small images HOT 1
- https://cdn.jsdelivr.net/npm/[email protected]/+esm
- Non-Responsive when viewport changes HOT 1
- With a multiple select, the search input isn't actually inline (ie it breaks onto it's own line) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from select2-bootstrap-5-theme.