bootstrap-select icon indicating copy to clipboard operation
bootstrap-select copied to clipboard

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

Open mattymatty76 opened this issue 1 year ago • 18 comments

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

mattymatty76 avatar Jul 21 '23 13:07 mattymatty76

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.

XusBadia avatar Jul 25 '23 18:07 XusBadia

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>

mattymatty76 avatar Jul 26 '23 06:07 mattymatty76

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!

XusBadia avatar Jul 26 '23 13:07 XusBadia

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

mattymatty76 avatar Jul 28 '23 05:07 mattymatty76

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!

JMACSilvestre avatar Aug 15 '23 21:08 JMACSilvestre

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

joshuap avatar Aug 22 '23 22:08 joshuap

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

jorbs avatar Aug 23 '23 00:08 jorbs

@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 avatar Aug 23 '23 06:08 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

mattymatty76 avatar Aug 23 '23 07:08 mattymatty76

@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

g-pane avatar Aug 28 '23 10:08 g-pane

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

Thank you, m.

mattymatty76 avatar Aug 28 '23 12:08 mattymatty76

<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.

g-pane avatar Aug 28 '23 13:08 g-pane

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>

mattymatty76 avatar Aug 28 '23 13:08 mattymatty76

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)

g-pane avatar Aug 28 '23 14:08 g-pane

works

in my case works

mattymatty76 avatar Aug 28 '23 16:08 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 avatar Aug 28 '23 16:08 mattymatty76

this example works, I have just tested it

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

mattymatty76 avatar Aug 28 '23 16:08 mattymatty76

Confirming this version works better with Bootstrap 5.3.0

Moxh3 avatar Jan 13 '24 22:01 Moxh3