it works very well (bootstrap-select-v1.14.0-beta3-updated and bootstrap 5.3.0)

[mattymatty76]

I have modified the file bootstrap-select-v1.14.0-beta3
and looks like working very well with bootstrap 5.3.0, I published the source code here

https://gist.github.com/mattymatty76/c996d3b77f298b2ec133be59992df9d4

I hope this is helpful

Thank you

[XusBadia]

Thanks! I am really trying to get it to work with Bootstrap 5 as well as it did in v4, since it's the best dropdown select plugin out there. I am getting trouble getting the list to build on page load (it only builds after clicking on the dropdown once). Have you managed to get that working?

Thanks for keeping this project alive.

[mattymatty76]

You are welcome
it's the same behavior that you find in the previous version as well.
When you open for the first time the page, that has a select, until you click on select you don't have li tags in .dropdown-menu
But you can bypass it putting this code after loading page...

<script>
$(document).ready(function() {
    $('.selectpicker').selectpicker('toggle');
});
</script>

[XusBadia]

I've looked everywhere for that but couldn't find it! Thanks!

Is there a way to toggle and have the li tags, but prevent it from actually open the dropdown?

Thanks @mattymatty76 for your help!

[mattymatty76]

Yes you can toggle two times, and the select will open and close immediately its dropdown-menu...
And in this manner the library bootstrap-select draws the list that you want with li tags

[JMACSilvestre]

Hi there! Could you help me to implement bootstrap-select in vite laravel? I have tried with bootstarp 5.3 and the original plugin 1.14.0-beta3. If o use the one you modified it Will work? Thanks!

[joshuap]

@mattymatty76 it appears that snippet.host is offline. Can you share the code as a GitHub gist?

[jorbs]

@mattymatty76 are you able to render the placeholder text properly?

[mattymatty76]

@joshuap

you can try with this, now the link works

https://gist.github.com/mattymatty76/c996d3b77f298b2ec133be59992df9d4

about that code in GitHub, I should create a fork of this project and put the library that I have modified in that link... but I don't know if it can help or confuse people

[mattymatty76]

@JMACSilvestre

Hi there! Could you help me to implement bootstrap-select in vite laravel? I have tried with bootstarp 5.3 and the original plugin 1.14.0-beta3. If o use the one you modified it Will work? Thanks!

maybe I don't know but you can try...

https://gist.github.com/mattymatty76/c996d3b77f298b2ec133be59992df9d4

[g-pane]

@mattymatty76 make a fork for this. I have a problem, also with the original one. The "required" HTML5 tag not showing the message if the select is inside a "row" of Bootstrap 5. Can you solve it? Thanks

[mattymatty76]

Hi @g-pane,
could you give me an example please: I don'tknow maybe in jsfiddle or codepen...

Thank you, m.

[g-pane]

<div class="row"> <div class="col-xl-12 mx-auto mt-3"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-6"> <h5 class="mb-0">TEST</h5> </div> <div class="col-6 text-end"> <h5 class="mb-0 d-inline">TEST: </h5><h5 id="test" class="mb-0 d-inline bg-danger rounded text-white p-1">TEST2</h5> <h6 class="mb-0 d-inline">- UM:</h6><h6 id="um" class="mb-0 d-inline p-1">?</h6> </div> </div> <hr/> <form> <div class="row gy-3 px-4 py-3 row-cols-1 row-cols-sm-2 row-cols-md-4 row-cols-lg-8"> <div class="col"> <h6 class="mb-0">SELECT</h6> <select id="test2" name="test2" class="form-control selectpicker mt-2" data-live-search="true" title="Test2" required> </select> </div>

If i remove "row gy-3 px-4 py-3 row-cols-1 row-cols-sm-2 row-cols-md-4 row-cols-lg-8" i see the message again.

[mattymatty76]

try this now it works

<div class="row"> 
    <div class="col-xl-12 mx-auto mt-3">
        <div class="card"> 
            <div class="card-body">
                <div class="row">
                    <div class="col-6"><h5 class="mb-0">TEST</h5></div>
                    <div class="col-6 text-end"> 
                        <h5 class="mb-0 d-inline">TEST: </h5>
                        <h5 id="test" class="mb-0 d-inline bg-danger rounded text-white p-1">TEST2</h5>
                        <h6 class="mb-0 d-inline">- UM:</h6>
                        <h6 id="um" class="mb-0 d-inline p-1">?</h6>
                    </div>
                </div>
                <hr>
                <form>
                    <div class="row gy-3 px-4 py-3 row-cols-1 row-cols-sm-2 row-cols-md-4 row-cols-lg-8">
                        <div class="col">
                            <h6 class="mb-0">SELECT</h6>
                            <select id="test2" name="test2" class="form-control selectpicker mt-2" data-live-search="true" title="Test2" required>
                                <option value="1">one</option>
                                <option value="2">two</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

[g-pane]

Not for me, i don't see the message. Only the focus on the button (p.s. submit button missing from the code, just for give you an idea)

[mattymatty76]

in my case works

[mattymatty76]

you can bypass the issue trying a jquery.validate.js library and redefine more or less this code to adapt to your case...

 $("form").validate({
		onfocusin: function(e) {this.element(e);},
		errorPlacement: function(error, element) {
			error.insertAfter(element);
		},
		highlight: function(element, errorClass, validClass) {
			if ($(element).is("select") ){
				if ($(element).parent().hasClass('bootstrap-select')) {
					$(element).parent().addClass(errorClass).removeClass(validClass);
				}else $(element).addClass(errorClass).removeClass(validClass);
			}else{
				$(element).addClass(errorClass).removeClass(validClass);
			}
		},
	    unhighlight: function(element, errorClass, validClass) {
	    	if ($(element).is("select") ){
				if ($(element).parent().hasClass('bootstrap-select')) {
					$(element).parent().removeClass(errorClass).addClass(validClass);
				}else $(element).removeClass(errorClass).addClass(validClass);
			}else{
				$(element).removeClass(errorClass).addClass(validClass);
			}
	    }
	});

[mattymatty76]

this example works, I have just tested it

https://jsfiddle.net/mattymatty76/ecd6azby/2/

[Moxh3]

Confirming this version works better with Bootstrap 5.3.0

[krishnarajsj]

could anyone provide me the corresponding bootstrap-select css?

Im facing below issue.

Wen I click on dropdown , its coming very close to the left margin and after a microsecond it alligns correctly

[nkavian]

Has anyone gotten this to work with Bootstrap's floating select? https://getbootstrap.com/docs/5.3/forms/floating-labels/#selects

[mattymatty76]

Hi @krishnarajsj,
you can use bootstrap-select.css v1.13.18 with or without adjustments or with your customizations...

[hasanmk52]

Hi, thanks for providing the updated library for BS 5. It works ok however I do face a few issues:

If the dropdown has large number of values then on click of the dropdown it takes time to open the list of values probably because it is trying to build the entire li element list at that time, so can we preinitialize that ?

Another is when I use it as a multi-select with optgroups and when I click on more than one value the tick mark doesn't come up consistently as shown in below screenshot

[mattymatty76]

Hi @hasanmk52,
have you tried this css file? https://gist.github.com/mattymatty76/43cb17bd11f76451cec2e2ff14fafbb2
it could be a problem related to the css style... In my case I have simulated your multi-menu without problems, so if you use bootstrap-select(v1.14.0-gamma1).js the only thing different for me is the css file...

regarding the slowness when you open menu, if the items are a lot you should use ajax select because there is a physical limit in loading elements due to memory saturation...

but before doing anything else, try to set this param in bootstrap-select(v1.14.0-gamma1).js
virtualScroll: 1000000,
It might help in rendering

[hasanmk52]

Yes I did use the same CSS file and have also tried adjusting the virtualScroll and still facing both the issues. As for the slowness I have around 50k elements and when I click the dropdown it takes up-to 2 secs to open it.

[mattymatty76]

@hasanmk52
you could try to build the menu, just to do a test, as key / value an incremental integer in key; this is because I had noticed that if the key was numeric up to 100k it did not give problems in opening (that is, it is acceptable as speed), but if key / value were both strings, then it slowed me down a lot: but these are all empirical tests, and in any case at those levels from 50k and up I would use ajaxselect.

In addition you can also try to trick it in this way: as soon as you create it, simulate in javascript a trigger that instantly opens and closes the menu: this should act as a sort of initialization of the menu rendering...

For the css try to do a bit of debugging because in my opinion you could have some css overlap: I tried to simulate a multi-selection menu and I had no problems with the check icons on the selected rows