Selectize is not working in Bootstrap5?

Selectize is not working in Bootstrap5?

FicosFicos Posts: 88Questions: 22Answers: 0

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

  • FicosFicos Posts: 88Questions: 22Answers: 0

    it seems to be a z-index problem but adding:

    <style>
      div.selectize-dropdown {
        z-index: 1051;
      }
    </style>
    

    doesn't solve the problem.

  • FicosFicos Posts: 88Questions: 22Answers: 0

    anyone?

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    Looks like the Selectize stylesheet isn't being loaded, and checking the HTML on the page (thanks for the link!) there is a typo:

    <link rel="styleshee" type="text/css"
    

    Missing t at the end of stylesheet. I suspect that's the issue.

    Allan

Sign In or Register to comment.