Why DashboardCode/BsMultiSelect looks ugly in my app ?

[sergeynilov]

I need to add dropdown to laravel app with bootstrap 5.1, but without jquery as it is not used in my app.
I found package https://github.com/DashboardCode/BsMultiSelect and I installed it with npm and in file resources/js/bootstrap.js
I added lines :

window._ = require('lodash');

try {
    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


import { createPopper } from "@popperjs/core";
import { ModuleFactory as bsMultiSelectFactory } from "@dashboardcode/bsmultiselect";

const multiSelectEnv = {window, createPopper};
const multiSelect = bsMultiSelectFactory(multiSelectEnv).BsMultiSelect;

window.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("select[multiple]").forEach((select) => {
    multiSelect(select);
  });
});

In blade.php file with select definition :

<div class="col-md-4 d-inline-flex justify-content-start align-items-start">
    <select name="filter_html_block_id[]" id="filter_html_block_id" multiple>
        <option value=""> - Select all html blocks - </option>
        @foreach($htmlBlocksSelectionArray as $htmlBlocksSelection )
            <option value="{{ $htmlBlocksSelection['id'] }}"
                    @if ( in_array($htmlBlocksSelection['id'], $filter_html_block_id) or count($htmlBlocksSelection) === 0) selected @endif>
                {{ $htmlBlocksSelection['name'] }}
            </option>
        @endforeach
    </select>

    <a class="nav-link link-secondary ml-2" onclick="javascript:filter_html_block_idOnChange()">
        <i class="bi bi-filter" ></i>
    </a>

</div>

I also added css styles :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@1.1.18/dist/css/BsMultiSelect.min.css">

@section('scripts')
    <script>
        ...

But when page is opened I see : https://prnt.sc/djQonuPc2ZIw

When I click on select input I see : https://prnt.sc/_kp_Uq5MdXz7
In package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    },
    "dependencies": {
        "@dashboardcode/bsmultiselect": "^1.1.18"
    }
}

What is wrong and how can it be fixed ?

Thanks!

[rpokrovskij]

Hi. Thank you for your report. Can you create the snippet like this https://codepen.io/rpokrovskij/pen/ExWyZMN ? I do not see other way how I could "catch it".