apalfrey / select2-bootstrap-5-theme Goto Github PK

View Code? Open in Web Editor NEW

202.0 202.0 45.0 803 KB

A Select2 v4 theme for Bootstrap 5

Home Page: https://apalfrey.github.io/select2-bootstrap-5-theme/

License: MIT License

JavaScript 13.49% SCSS 86.51%

bootstrap bootstrap5 css scss select2

select2-bootstrap-5-theme's People

Contributors

Stargazers

Watchers

Forkers

tagliala aroldos91 rgkenga dvdknaap iskandarali alitrack pixelshaped pepijnnichting rnetonet sebasayala tackulmine royswale donttouchfranky tomsommer sschaap sir-will liyu001989 vasildakov yozhariennanda thelinker lubeyag idreamsoft imo-tikuwa nerian davidalphafox 31434116 bhangyiluke malcon aadk aidanraskil f1mishutka aurangzeb-sinewave orangzeb006 amshkv lxlang djvilione s2001wincrown dariocarbone g10f bal-sm szkaradek-przemyslaw rsa-software-team

select2-bootstrap-5-theme's Issues

AJAX on mobile not selecting touched item

Asked over at SO, on mobile with AJAX the item above what's touched is incorrectly selected. Not shown in mobile emulators.

Minimal example, note how removing ajax: {url: 'ajax/example',dataType: 'json',} from $(document).ready(function() stops the issue:

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
</head>

<select class="form-select" id="custom-select" >
  <option>Christmas Island</option>
                <option>South Sudan</option>
                <option>Kenya</option>
                <option>French Guiana</option>
</select>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {$('#custom-select').select2({
    theme: "bootstrap-5",
    ajax: {url: 'ajax/example',dataType: 'json',    }
    });});
</script>
</body>
</html>

How can we fix this?

Dark mode

I have a setup where we use the https://github.com/vinorodrigues/bootstrap-dark-5/blob/main/docs/bootstrap-dark.md theme. The select2 BS5 theme does not support it. It stays pretty white. Is this because Select2 uses different stylesheets that the dark theme does not know of?

Change background of select DOM when value selected

This used to work with bootstrap4 theme

.select2-selection__rendered[title] {
	background-color: #D9FFC7;
}

Any change we can do this with bootstrap-5 theme ? I only want to set the color if option:selected is present, if not defaault white select2 is shown

Non-Responsive when viewport changes

Unlike Bootstrap 5, when the viewport changes, the select2 boxes do not change size to fit within their columns anymore and will overflow. not an issue if the viewport doesn't change as it does seem to set the size correct on load, but if you switch from say landscape to portrait, things get "ugly".

Is there a way to trigger a redraw on the select2 when viewport size changes?

create new tag ?

Hi,
Is it possible to create new tag including lastest fix please ? (ex: 1.1.2)
Thanks

Add pls support dark theme bootstrap 5.3 and floating label

Does not work "select2--small"

Не работает

// 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 ******

how can I use it in Vue Js

Use of Vue JS with HTML and script of Vue

please help me out

@apalfrey

SCSS Floating Labels

HI there

I'm using Bootstrap 5.3,0-aplha1 and making use of floating labels on all inputs including selects. All works well until I enable the Select2 extension - once I do the labels on Selects don't show. As a test I used the sample code from the Bootstrap examples page:

<div class="col-sm-10">
    <div class="form-floating">
        <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <label for="floatingSelect">Works with selects</label>
    </div>
</div>

Once select2 is enabled the label doesn't show.

Great software by the way! ;)

PS: I did try Bootstrap 5.2 but same issue.....

Hard-coded paths to Bootstrap dependencies cause failures with popular project structures

This project's Sass contains hard-coded paths to Bootstrap's Sass, assuming it can be found in a node_modules folder in the root of the including module:

select2-bootstrap-5-theme/src/select2-bootstrap-5-theme.scss

Lines 5 to 7 in d63866a

    
           @import "node_modules/bootstrap/scss/functions"; 
        
           @import "node_modules/bootstrap/scss/variables"; 
        
           @import "node_modules/bootstrap/scss/mixins";

This fails under any other structure—e.g. as NPM 7 Workspaces, which has node_modules in a different location.

Is it possible to switch to the use of automatically-resolving imports/include directories so that the following can be used instead?

 @import "bootstrap/scss/functions"; 
 @import "bootstrap/scss/variables"; 
 @import "bootstrap/scss/mixins";

Could someone add support for small images

Hi, I would like to have an icon selector. We now use different JS script for this while we use select2 for all other things. Now i've experimented a little DevTools and found it rather easy to add.

If I add (img src="/imagepath/imagename.png" class="me-3" style="max-height:20px;max-width=20px;") (replaced <> for () to not launch the code execution) to the LI's in the select2-results just before the name of the line, this actually looks perfect!

It would be amazing if we could put the url to the image in as data-select2-img for every option and get the image displayed in front of the text.

Adding the same line to the span select2-selection__rendered just before the name makes it all look like this:

I hope you like this too and could add it please so we can just use select2 for everything! Thnx a lot in advance.

Peter

select2-bootstrap-5-theme@npm:1.2.0 doesn't provide @popperjs/core (p36ae4), requested by bootstrap

Hello,

when I install this package using yarn v3.2.0, I'm getting the error:

➤ YN0002: │ select2-bootstrap-5-theme@npm:1.2.0 doesn't provide @popperjs/core (p36ae4), requested by bootstrap

which is referenced here:

https://yarnpkg.com/advanced/error-codes#yn0002---missing_peer_dependency

Can you please fix it? Thank you.

Repo "About"

What it says:
A Select2 v4 theme for Bootstrap 5

What it should say:
A Bootstrap 5 theme for Select2 v4

Dropdown opens under modals

Since a few months, and following these commits on the Bootstrap5 project:

The default z-index for a modal is not '1050' anymore, but '1055'. This means when using select2 inside a modal the dropdown will open under the modal.

z-index is currently specified in the main select2 css, not in this project. As this regards Bootstrap5 only, I think this modification should probably be made in this project.

select2 on modal window

Hello

I can input text to search field when select2 in modal window.
Search field is not focused

Dropdown box-shadow

select2-boostrap-3 had a border color and shadown on select2-dropdown

select-bootstrap-5 seems not to have it. Could fix it by now adding: box-shadow: 0 0.5rem 0 0.25rem #0d6efd40

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
border-top: 0 solid transparent;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 0 0.5rem 0 0.25rem #0d6efd40;
}
the only thing now, the spread at the bottom is a bit large, and with using input-group this needs more adjustments.

Add support for Select2 v4.0.x

There's a few styling issues thanks to changes between 4.0 and 4.1;

Spacing on multiple selects seems a bit off
"Ghost" x visible on remove buttons due to HTML changes
Selected items don't display selected styling

Here's examples of the styling issues;

Docs will also have to be expanded in order to accommodate both Select2 v4.0.x and v4.1.x

Multiple Select Field Boundary Overflow when many options are chosen

Environment
OS: Windows 10
Browser: Chrome v88.0.4324.182
Tested Version: 1.0.0

Screenshot

Expected result
When many options are chosen, the options should not exceed the boundary of the field. Instead, those overflown should be on the new line. Moreover, the blinking text cursor should appear right next to the last field.

Actual result
Options break through the boundary. The blinking text cursor is on the new line.

depreciation warning

Hi,

I have these warning message when i run yarn dev :

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($s2bs5-padding-x, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
60 │ $s2bs5-group-padding-x:          $s2bs5-padding-x / 2 !default;
   │                                  ^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\select2-bootstrap-5-theme\src\_variables.scss 60:34               @import
    node_modules\select2-bootstrap-5-theme\src\_include-all.scss 1:9               @import
    node_modules\select2-bootstrap-5-theme\src\select2-bootstrap-5-theme.scss 9:9  @import
    assets\css\app.scss 3:9                                                        root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($s2bs5-padding-x-sm, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
87 │ $s2bs5-group-padding-x-sm:       $s2bs5-padding-x-sm / 2 !default;
   │                                  ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\select2-bootstrap-5-theme\src\_variables.scss 87:34               @import
    node_modules\select2-bootstrap-5-theme\src\_include-all.scss 1:9               @import
    node_modules\select2-bootstrap-5-theme\src\select2-bootstrap-5-theme.scss 9:9  @import
    assets\css\app.scss 3:9                                                        root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($s2bs5-padding-x-lg, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
103 │ $s2bs5-group-padding-x-lg:       $s2bs5-padding-x-lg / 2 !default;
    │                                  ^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules\select2-bootstrap-5-theme\src\_variables.scss 103:34              @import
    node_modules\select2-bootstrap-5-theme\src\_include-all.scss 1:9               @import
    node_modules\select2-bootstrap-5-theme\src\select2-bootstrap-5-theme.scss 9:9  @import
    assets\css\app.scss 3:9                                                        root stylesheet

Missing disabled option styling

As this took inspiration from select2-bootstrap4-theme, it also (inadvertently) picked up the issue it has where disabled options are not styled as such. Giving disabled options the $s2bs5-disabled-color color should work just fine

Floating Label - Multi Select Box

Issue Description:
The selected options, overlay the floating label (refer screenshot below).

Screen Shot:

Fiddle - Example
https://jsfiddle.net/vtycmdow/12/

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>PMS - Additional Contract</title>
	<!-- Bootstrap 5 -->
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<!-- Select2 --> 
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
	<!-- select2-bootstrap-5-theme -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
</head>

<body>
 	<!-- Options -->
	<div class="form-floating m-3">
		<select multiple class="form-select" id="multiSelect" th:field="*{brokerCategoryCodes}">
			<option value="A">Option - A</option>
			<option value="B">Option - B</option>
			<option value="C">Option - C</option>
			<option value="D">Option - D</option>
		</select>
		<label for="multiSelect">Options:</label>
	</div>

	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<!-- Bootstrap -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
	<!-- Select2 -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

	<script>
		$('#multiSelect').select2({
		theme: "bootstrap-5",
		placeholder: "I AM DA PLACEHOLDER"
		});
	</script>
</body>
</html>

Validation icons

Иконки валидации

.is-invalid + .select2-container--bootstrap-5 .select2-selection,
form.was-validated select:invalid + .select2-container--bootstrap-5 .select2-selection {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center,center right 2.25rem;
    background-size: 16px 12px,calc(.75em + .375rem) calc(.75em + .375rem);
}
.is-invalid + .select2-container--bootstrap-5 .select2-selection.select2-selection--multiple,
form.was-validated select:invalid + .select2-container--bootstrap-5 .select2-selection.select2-selection--multiple {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-position: center right 2.25rem;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.is-valid + .select2-container--bootstrap-5 .select2-selection,
form.was-validated select:valid + .select2-container--bootstrap-5 .select2-selection {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center,center right 2.25rem;
    background-size: 16px 12px,calc(.75em + .375rem) calc(.75em + .375rem);
}
.is-valid + .select2-container--bootstrap-5 .select2-selection.select2-selection--multiple,
form.was-validated select:valid + .select2-container--bootstrap-5 .select2-selection.select2-selection--multiple {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-position: center right 2.25rem;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}

Any solution to this problem?

Does not work "select2--small"

#57

???

Comatibility issue with Django-autocomplete-light. Clear button not appearing.

I don't know if this is select2-bootstrap-5-theme issue or django-autocomplete-light (DAL) issue so apologies in advance if it's unrelated.

I'm using select2 through DAL and applying this packages as select2 theme. As described here

autocomplete.ModelSelect2(
    url='<View url>',
    attrs={
        'data-theme': 'bootstrap-5',
        'data-allow-clear': True
    },
)

Theming works fine but clear button doesn't appear (In both RTL and LTR mode. I'm developing a RTL website).

If I remove 'data-theme', the button appears. I tried to set theme via JS, but no success. I checked the resulted Html and saw that <button> tag isn't even in generated Html so it's more likely DAL issue, but I don't have the required skill to debug it further.

Steps to reproduce:
I created a sample repository. Just execute runserver command and go to default route

select2 not showing correctly inside Bootstrap Floating Labels

When you place a standard select element inside a .form-floating class (Bootstrap 5) it displays correctly, but once you replace the standard select element with Select2 it no longer displays correctly.

Example code:

<div class="form-floating">
	<select id="floatingLabelsExample" class="form-select">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
	</select>
	<label for="floatingLabelsExample">Choose an option</label>
</div>

See: https://getbootstrap.com/docs/5.1/forms/floating-labels/

Bottom border disappears with validated inputs

Hi,

terrific job here! 👏🏼👏🏼👏🏼

Just found this issue:

How to replicate:

https://apalfrey.github.io/select2-bootstrap-5-theme/4.0/
Click twice on Validation > With .was-validated example

The reason is that the transparent top/bottom border rule should only be applied if the container is open

Can't reproduce example to auto place cursor in search field. Are dumb questions welcome here?

I'm having trouble getting the typing cursor to automatically place within the text field once they're clicked on as shown in the example page. I'm unsure if this the same issue as "Search field not focused".

I've tried to isolate the problem by using the source code of that page with no luck. After removing other content and adding <script>$("#eg-select").select2({theme: "bootstrap-5",});</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
    <!-- Select2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />

    <!-- select2-bootstrap-5-theme -->
    <link href="/select2-bootstrap-5-theme/select2-bootstrap-5-theme.css" rel="stylesheet"> <!-- for local development env -->
</head>

<body class="bg-light pb-5">
    <div class="container pb-3 mb-5">
        <h3>Single Select</h3>
        <form class="mb-4">
            <select class="form-select" data-placeholder="Choose one thing" data-allow-clear="1" id="eg-select">
                <option></option>
                <option>Reactive</option>
                <option disabled>Solution (disabled)</option>
                <option>Conglomeration</option>
                <option>Algoritm</option>
                <option>Holistic</option>
        <script>$("#eg-select").select2({
            theme: "bootstrap-5",
        });
        </script>
            </select>
        </form>
    </div>

    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Select2 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

    <!-- select2-bootstrap-5-theme -->
    <script src="/select2-bootstrap-5-theme/script.js"></script>
</body>
</html>

What am I doing wrong? Am I missing something?

Also, I'm new to front end so I'm probably doing something stupid. I'd ask somewhere else but don't know where else to try for bootstrap / select2, so please feel free to tell me of a more appropriate place I can ask stupid questions.

select2-bootstrap-5-theme with ajax lost the style

with ajax lost the style...

$("#element").select2({
      placeholder: 'Seleccione',
      allowClear: true,
      minimumInputLength: 1,
      ajax: {
          url: 'SearchCustomer.php',
          dataType: 'json',
          delay: 10,
          processResults: function(dataMaster) {
              return {
                  results: dataMaster
              };
          },
          cache: true
      }
 });

input not focus on mobile (iphone)

input not focus on mobile (iphone)
https://prnt.sc/ZvUTwGtvGzSj

Keyboard Accessibility with jQuery 3.6.0

When I have a select2 field I have to use the mouse to get the keyboard to work. If I tab between fields in the past (Bootstrap-3) I could just start typing. Now it highlights the select2 field but keyboard entry does not work. jQuery 3.5.1 is not compatible so I cannot roll back.

https://jsfiddle.net/a7pz5bsg/3/

If you click on the select it allows keyboard input, but using tab with space or enter keys does not work.

Any ideas?

Error after upgrade to "Bootstrap 5.2.3"

After upgrade bootstrap to version 5.2.3 I got the following error, any suggestions to fix it?

Error: argument `$color2` of `mix($color1, $color2, $weight: 50%)` must be a color
        on line 212:11 of node_modules/bootstrap/scss/_functions.scss, in function `mix`
        from line 212:11 of node_modules/bootstrap/scss/_functions.scss, in function `shade-color`
        from line 78:138 of node_modules/select2-bootstrap-5-theme/src/_variables.scss
        from line 1:9 of node_modules/select2-bootstrap-5-theme/src/_include-all.scss

Support for input sizes i.e form-select-sm

Currently, the theme doesn't support small size (sm). It falls back to default size.

Here is a codepen for testing https://codepen.io/prionkor/pen/vYxdZeK

Yarn warning with @popperjs/core

Hi,

I have this warning on yarn command :

➤ YN0002: │ select2-bootstrap-5-theme@npm:1.3.0 doesn't provide @popperjs/core (p476ea), requested by bootstrap

I have already "@popperjs/core": "^2.9.2" in my package.json

Have you an idea to solve it ?

Thanks

With a multiple select, the search input isn't actually inline (ie it breaks onto it's own line)

The issue

When using this theme on a multiple select, the search input is always on it's own line (and never along side/inline the selected values):

The v4 theme doesn't have this issue though (see demo here):

Note that this is separate/different from the issue when using prepends etc (#79).

Code and demo of issue

Here

Expected behaviour

The search input is on the same line/level as the selected values and only goes onto a new line when there is insufficient space

select 2 in inline-block not working?

I'm trying to display the select as inline-block, which should be quite standard.
The select get automatically a display: block when using this theme (otherwise works fine).

Apparently this is by design:

select2-bootstrap-5-theme/src/_layout.scss

Line 3 in d8e7540

display: block;

How can this be changed?

https://cdn.jsdelivr.net/npm/[email protected]/+esm

Hello!

In the cdn.jsdelivr.net +esm path is not available. Could you provide it in order to use with Symfony's asset mapper:
https://symfony.com/doc/current/frontend/asset_mapper.html#importing-3rd-party-javascript-packages

Autofocus is not working in [email protected]

In jquery 3.6.0 the autofocus is not working, in 3.5.0 everything is ok

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

Option disabled attr

Hi, the options marked with the disabled attribute are not stylized in any way. I made this option, it would be nice if your package had such support.

.select2-results__option {
    &[aria-disabled] {
        @extend .text-secondary;
        opacity: .5;
    }
}

input group (select 2 + input box)

With select2-bootstrap-3 I managed to get a select2box together with an input box in a table using

form-inline -> -> input-group select2-bootstrap-append (custom set to width 100%)
-> select2
-> input-group-btn -> input (custom set to width 100%)

Image: left (select2) keeps its size, and right(input) goes to 100% when resizing

Now I'm trying to do the same with select2-bootstrap-5, but I can't have it fixed because the arrow svg image is floating on top.
So both select2 and input are having width 100%, and unable to set the select2 to width 1px due the image.

form-inline -> input-group
->select2
-> input

Image: left(select2) goes to 100% wich I don't want to happen.

Any Idea how to fix this. The only way I'm thinking to have the arrow class back from bootstrap 3 but there might be a better way.

SCSS Floating labels

Hi, In my project I use" floating labels " from bootstrap. Current styles don't support select with it, maybe not necessary :) but I selected select2 and your add-on just so as not to rewrite all the styles for bootstrap on my own. You can add my styles, maybe not quite what you need, but I had enough of these styles.

https://getbootstrap.com/docs/5.0/forms/floating-labels/

.form-floating {
    .select2-container--bootstrap-5 {
        .select2-selection {
            height: $form-floating-height;
            padding: $form-floating-padding-y $form-floating-padding-x;

            > .select2-selection__rendered {
                margin-top: .6rem;
                margin-left: .25rem;
            }
        }
    }
}

Multiple select and/with input group

Using multiple select the input box is too high compared to others because the search inline is on the next line.
Would be nice if this would work like bootstrap 3, inline next too tags.

With these adjustment I could fix it for now :

// fix: input-group

       .input-group > .select2-container--bootstrap-5 {
            width: auto !important;
        }

// fix: multiple select
.select2-selection--multiple {
padding: 0 !important;
}
.select2-selection--multiple > ul {
display: inline-flex !important;
}
.select2-selection--multiple > ul > li {
padding: 0 0.3rem !important;
margin: 0.3rem !important;
}
.select2-selection--multiple .select2-search--inline {
display: inline-flex !important;
width: auto !important;
margin-top: 0.3rem !important;
vertical-align: middle;
}

SassError: Undefined variable: "$input-height".

Hello!

I am getting an error SassError: Undefined variable: "$input-height"

ERROR

ERROR  Failed to compile with 1 errors
12:16:51

 error  in ./assets/css/select2_bs5.scss

SassError: Undefined variable: "$input-height".
        on line 2 of node_modules/select2-bootstrap-5-theme/src/_variables.scss
        from line 1 of node_modules/select2-bootstrap-5-theme/src/_include-all.scss
        from line 2 of assets/css/select2_bs5.scss
>> $s2bs5-height:                   $input-height !default;
   ---------------------------------^

my select2_bs5.js

'use strict';

import '../css/select2_bs5.scss';

my select2_bs5.css

@import "node_modules/select2/src/scss/core";
@import "node_modules/select2-bootstrap-5-theme/src/include-all";

Am i doing something wrong or is it a bug?
Thank you for the help!

Invalid links in examples pages

E.g. the Select2 4.0 link goes to https://apalfrey.github.io/4.0 instead of https://apalfrey.github.io/select2-bootstrap-5-theme/4.0

Links need to be replaced to solve the issue

The magnifying glass image and the CSS to display it seem to be missing from all the v4 e v5 themes.

Ref: select2/select2#4629 (comment)

I miss this feature too. The magnifying glass image and the CSS to display it seem to be missing from all the v4 themes. My workaround was to lift select2.png and select2x2.png from the v3 files and insert the following CSS into my application:

.select2-container--default .select2-search--dropdown .select2-search__field {
  background: url(select2.png) right top no-repeat;
  background-position: right -22px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx)  {
   .select2-container--default .select2-search--dropdown .select2-search__field {
      background-image: url(select2x2.png);
      background-repeat: no-repeat;
      background-size: 60px 40px;
      background-position: 100% -21px;
   }
}

I notice that some people have made their own themes that put the icon back. For example, this Yii2 integration:
http://demos.krajee.com/widget-details/select2

Originally posted by @rohanc in select2/select2#4629 (comment)

Minor CSS change in Bootstrap 5.2.0

I note from the official BS blog that buttons and form inputs have been slightly modified in the latest release which affect select2-bootstrap-5-theme.

The change is to border-radius in the .select2-container--bootstrap-5 .select2-selection class. Previously the value was 0.25rem, now it is 0.375rem.

That's all, just thought I'd bring it to your attention - thank you for a great theme!

Error with BS 5.3.0-aplha1

Steps to reproduce:

em@4accc7f93e9b:/var/www/html$ npx mix                           

✖ Mix
  Compiled with some errors in 5.68s

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color2: var(--bs-border-color) is not a color.
    ╷
212 │   @return mix(black, $color, $weight);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_functions.scss 212:11                shade-color()
  node_modules/select2-bootstrap-5-theme/src/_variables.scss 78:84  @import
  node_modules/select2-bootstrap-5-theme/src/_include-all.scss 1:9  @import
  resources/sass/app.scss 25:9                                      root stylesheet
    at processResult (/var/www/html/node_modules/webpack/lib/NormalModule.js:758:19)
    at /var/www/html/node_modules/webpack/lib/NormalModule.js:860:5
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/var/www/html/node_modules/sass-loader/dist/index.js:69:5)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

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

Migrate compiler to use Dart Sass

Since 2020-10-26, node-sass has been deprecated: https://sass-lang.com/blog/libsass-is-deprecated

Currently this project is using gulp-sass for it's compiling which uses node-sass. While gulp-sass DOES allow you to pick a compiler to use, it still includes node-sass as a dependency which is unnecessary.

gulp-dart-sass is a fork of gulp-sass which already uses Dart Sass (as it's name suggests). However, due to the way Yarn works, we can only work with the version of Dart Sass it supplies. While this is currently the latest version, including any the Bootstrap variables file (required for our variables) results in deprecation warnings for division operators: twbs/bootstrap#34051

So, this will have to be done in steps in order to ensure compatibility remains without warning messages;

Replace Yarn with vanilla npm
Replace gulp-sass with gulp-dart-sass
Add [email protected] to prevent deprecation messages
Update sass to latest once Bootstrap updates with deprecation fixes

The first 3 parts should be fine to do straight away, however the final part will require waiting until the fixes are in place on Bootstraps end. Once they are, if any issues crop up from this project, we can take care of them as necessary

scrolls appear in each of the option group

if we build select2 on a large dataset, we can see scroll bar in each of the option group.

Possible solution: change

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options {
    max-height: 15rem;
    overflow-y: auto;
}

into this:

.select2-results > .select2-results__options {
    overflow-y: auto;
    max-height: 40vh;
}

Search field not focused

Using latest versions of bootstrap5, jquery and select2, theme does not focus on the search field when dropdown opens. See attachment.
index.txt

	@import "node_modules/bootstrap/scss/functions";
	@import "node_modules/bootstrap/scss/variables";
	@import "node_modules/bootstrap/scss/mixins";