Selectize is not working in Bootstrap5?
Selectize is not working in Bootstrap5?
Link to test case: beleggen.oostveen-advies.eu/testbankboek/bankboek.html
Debugger code (debug.datatables.net): upanuc
Error messages shown: none
Description of problem:
Selectize field is not working since i changed to Bootstrap5. See my testcase, field "grootboek": it is only an empty non accessible field. Using Select gives no problems
this is the <head>:
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css'/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.7.0/moment-2.29.4/jszip-3.10.1/dt-2.0.3/af-2.7.0/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/b-print-3.0.1/cr-2.0.0/date-1.5.2/fc-5.0.0/fh-4.0.1/kt-2.12.0/r-3.0.1/rg-1.5.0/rr-1.5.0/sc-2.4.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/sr-1.4.0/datatables.min.css">
<link rel="styleshee" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/css/selectize.css">
<link rel="stylesheet" type="text/css" href="css/editor.selectize.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="css/editor.bootstrap5.min.css">
<!-- overige -->
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs5/jq-3.7.0/moment-2.29.4/jszip-3.10.1/dt-2.0.3/af-2.7.0/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/b-print-3.0.1/cr-2.0.0/date-1.5.2/fc-5.0.0/fh-4.0.1/kt-2.12.0/r-3.0.1/rg-1.5.0/rr-1.5.0/sc-2.4.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/sr-1.4.0/datatables.min.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script><script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/editor.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/js/standalone/selectize.js"></script>
<script src="js/editor.selectize.js"></script>
Any ideas?
Thanks,
Jan
This question has an accepted answers - jump to answer
Answers
it seems to be a z-index problem but adding:
doesn't solve the problem.
anyone?
Looks like the Selectize stylesheet isn't being loaded, and checking the HTML on the page (thanks for the link!) there is a typo:
Missing
tat the end ofstylesheet. I suspect that's the issue.Allan