Open LocalHeroPro opened 1 year ago
"Quick fix" Change in node_modules/select2-bootstrap-5-theme/src/_variables.scss from
$s2bs5-clear-icon: str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color($s2bs5-border-color, 50%)}) !default;
to:
$s2bs5-clear-icon: str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color(red, 50%)}) !default;
@apalfrey any chance this could be fixed in a release?
Same issue with: bootstrap: 5.3.0-alpha3 select2: 4.1.0-rc.0 bootstrap-5-theme: 1.3.0
Same here with 5.3.0 release, could you please publish a new release with the minor fix suggested by @LocalHeroPro (it works like a charm) ?
I just ran into this issue myself. Instead of editing the package files, I set the variable myself before including the package:
$s2bs5-border-color: red;
@import '~select2-bootstrap-5-theme';
Replacing original color with red one is not a good solution.
Tracing $s2bs5-border-color
assignments would get this chain:
$s2bs5-border-color = $form-select-border-color = $input-border-color = $border-color
So correct quick fix is to add this line before importing select2-bootstrap-5-theme
:
$s2bs5-border-color: $border-color;
With bootstrap 5.3.1
and select2 4.1.0-rc.0
this is completely broken
$('#edtText').select2({
theme: "bootstrap-5",
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
});
<div class="col-2">
<input type="text" class="form-control" value="text" />
<div class="debug-border"></div>
<select type="text" class="form-control debug-border" id="edtText"></select>
<div class="debug-border"></div>
</div>
(debug-border
) is just a dashed pink border to show boundaries of the control and code is from sample in Single select from document
attempted fixing css with replacing background-color:white
with background-color:var(--bs-secondary-bg);
and it looks better but the width is still broken and select is hidden too
this fork is compatible with boostrap 5.3.1: https://github.com/g10f/select2-bootstrap-5-theme.git
Edit: By working I mean that you need to compile the scss from the fork.
would love to see this merged into the main repo
Always broken in Bootstrap 5.3.2
You can just patch it like this :
$s2bs5-border-color: $border-color;
@import "select2-bootstrap-5-theme/src/include-all";
this fork is compatible with boostrap 5.3.1: https://github.com/g10f/select2-bootstrap-5-theme.git
Edit: By working I mean that you need to compile the scss from the fork.
would love to see this merged into the main repo
The clear button shows, but doesn't really work in this version...any other options? I don't know how to compile CSS, so a completed css file would be awesome!
You can just patch it like this :
$s2bs5-border-color: $border-color; @import "select2-bootstrap-5-theme/src/include-all";
this fixed for me, select2-bootstrap-5-theme version "1.3.0"
Steps to reproduce:
BS: 5.3.0-aplha1: https://getbootstrap.com/docs/5.3/migration/ select2: 4.1.0-rc.0 select2-bootstrap-5-theme: 1.3.0