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]

`

TEST

TEST:

TEST2

- UM:

?

---

SELECT

` 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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

in my case works

mattymatty76 commented 1 year ago

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 commented 1 year ago

this example works, I have just tested it

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

Moxh3 commented 8 months ago

Confirming this version works better with Bootstrap 5.3.0

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[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