select2 multiple select dropdown css issue

[RohitM-IN]

normally a dropdown should be like

and its like that but only when multiselect is off
but when multiselect option is on its like this:

<select name="teacher_id[]" class="form-control select2" multiple="true">
...
</select>

//js 
$.fn.select2.defaults.set( "theme", "bootstrap4" );
$('.select2').select2();

the list will increase to 60 or so it a search field is needed or else i would have disabled it

here is head include css i got from Admin lte 3 3.1.0-rc
https://pastebin.com/3DAWBYSx

these are all the css file i included but i dont think any of these are conflicting

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/fontawesome-free/css/all.min.css") }}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/icheck-bootstrap/icheck-bootstrap.min.css") }}">
  <!-- JQVMap -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/jqvmap/jqvmap.min.css") }}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{ asset("backend/dist/css/adminlte.css") }}">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/overlayScrollbars/css/OverlayScrollbars.min.css") }}">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/daterangepicker/daterangepicker.css") }}">
  <!-- summernote -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/summernote/summernote-bs4.min.css") }}">
  <!-- Select2  theme -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/select2/css/select2.min.css") }}">
  <!-- Select2 bs4 theme -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css") }}">
  <!-- Bootstrap4 Duallistbox -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css") }}">
  <!-- BS Stepper -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/bs-stepper/css/bs-stepper.min.css") }}">
  <!-- icheck bootstrap  -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/icheck-bootstrap/icheck-bootstrap.min.css") }}">
  <!-- datatables bootstrap  -->
  <link rel="stylesheet" href="{{ asset("backend/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css") }}">
  <!-- Custom Css -->
  <link rel="stylesheet" href="{{ asset("css/wickedpicker.min.css") }}">
  <link rel="stylesheet" href="{{ asset("css/bootstrap-datetimepicker.min.css") }}"  />

I check it no other css are causing the error 🤔 except adminlte.css (Admin LTE v3 here) since its main theme of website
I also updated it to latest css version by replacing the code from repo

[axolotl-logic]

Did you find a workaround for this? I suffer from the same isue.

[antoniosmgatto]

Did you find a workaround for this? I suffer from the same isue.

Me too. I found #67 that address the issue. Try to install from github or downgrade select2:

yarn add https://github.com/tagliala/select2-bootstrap4-theme#feature/refactor-as-custom-select

[Rikijs]

yarn add https://github.com/tagliala/select2-bootstrap4-theme#feature/refactor-as-custom-select

Sadly, this command does not work on Windows 10

[munnellg]

Came across this issue today and found that it was caused by a version mismatch between the CSS files and JavaScript files I was linking from the CDN (I had linked to v4.0.13 for CSS and v4.1.0-rc.0 for JS)