DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

search field Select2 seems not to work with Bootstrap5

search field Select2 seems not to work with Bootstrap5

FicosFicos Posts: 88Questions: 22Answers: 0
in Editor

testcase

var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.partijen.php',
        table: '#partijen',
        fields: [
            {
                "label": "rv:",
                "name": "partijen.rv",
                type: "select2"
            },
            {
                "label": "titel:",
                "name": "partijen.titel"
            },
            {
                "label": "familienaam:",
                "name": "partijen.familienaam"
            },
            {
                "label": "vertegenwoordiger:",
                "name": "partijen.vertegenwoordiger"
            },
            {
                "label": "volet:",
                "name": "partijen.volet"
            },
            {
                "label": "vovoe:",
                "name": "partijen.vovoe"
            }
        ]
    } );

Since I use Bootstrap5 I am not able to use the search field in Select2
What am I doing wrong here?

Thanks.

This question has an accepted answers - jump to answer

Answers

  • FicosFicos Posts: 88Questions: 22Answers: 0

    To initialise bootstrap5 and select2 I have used:

    <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css'/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.3/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.6/sb-1.3.3/sp-2.0.1/sl-1.4.0/sr-1.1.1/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
    
    
    <link rel="stylesheet" type="text/css" href="../css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="../css/editor.bootstrap5.min.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js" integrity="sha256-0vuk8LXoyrmCjp1f0O300qo1M75ZQyhH9X3J6d+scmk=" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs5/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.11.5/af-2.3.7/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/cr-1.5.5/date-1.1.2/fc-4.0.2/fh-3.2.2/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.2/sp-2.0.0/sl-1.3.4/sr-1.1.0/datatables.min.js"></script>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js'></script>
        
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>    
    <script src="../assets/vendor/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="../assets/vendor/bootstrap-datepicker-master/dist/locales/bootstrap-datepicker.nl.min.js"></script>
    <script src="../assets/extensions/moment-with-locales.js"></script>
    <script src="../assets/extensions/datetime-moment.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://cdn.datatables.net/plug-ins/1.11.3/dataRender/ellipsis.js"></script>
    <script src="../assets/extensions/editor.select2.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
    <script src="../assets/extensions/editor.ckeditor5.js"></script>
  • FicosFicos Posts: 88Questions: 22Answers: 0

    To initialise bootstrap5 and select2 I have used:

    <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css'/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.3/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.6/sb-1.3.3/sp-2.0.1/sl-1.4.0/sr-1.1.1/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
    
    
    <link rel="stylesheet" type="text/css" href="../css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="../css/editor.bootstrap5.min.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js" integrity="sha256-0vuk8LXoyrmCjp1f0O300qo1M75ZQyhH9X3J6d+scmk=" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs5/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.11.5/af-2.3.7/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/cr-1.5.5/date-1.1.2/fc-4.0.2/fh-3.2.2/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.2/sp-2.0.0/sl-1.3.4/sr-1.1.0/datatables.min.js"></script>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js'></script>
        
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>    
    <script src="../assets/vendor/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="../assets/vendor/bootstrap-datepicker-master/dist/locales/bootstrap-datepicker.nl.min.js"></script>
    <script src="../assets/extensions/moment-with-locales.js"></script>
    <script src="../assets/extensions/datetime-moment.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://cdn.datatables.net/plug-ins/1.11.3/dataRender/ellipsis.js"></script>
    <script src="../assets/extensions/editor.select2.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
    <script src="../assets/extensions/editor.ckeditor5.js"></script>
  • carlopcarlop Posts: 37Questions: 9Answers: 1

    It never worked.
    Select2 works in a standard Bootstrap modal following this guide: https://select2.org/troubleshooting/common-problems
    But it doesn't work in an Editor modal.
    It seems a Css problem, but I never figured out how to fix it.

  • kthorngrenkthorngren Posts: 21,324Questions: 26Answers: 4,949

    The select2 input seems to work with Editor in your example. I'm able to select and change the options. However the table displays the value not the label. This thread might help to display the label in the table.

    Please provide the steps to recreate the problem in your test case.

    Kevin

  • carlopcarlop Posts: 37Questions: 9Answers: 1
    Answer ✓

    You're able to select and change the options, but if you click on the search field the focus goes to the close X button on the top right.
    The actual workaround is to disable search field or switch to a different library, like Selectize or Choice.

  • kthorngrenkthorngren Posts: 21,324Questions: 26Answers: 4,949
    edited May 2022

    May be you can use open or opened to execute this code:

        $('#mySelect2').select2({
        dropdownParent: $('#myModal')
    });

    Kevin

  • FicosFicos Posts: 88Questions: 22Answers: 0

    @carlop : Select2 worked perfectly under Bootstrap4, thanks for the suggestion I will switch to Selectize for Bootstrap5, that works as wanted.

    Thanks all!
    Jan

  • sasmitsasmit Posts: 5Questions: 1Answers: 1

    I had the exact same issue and spent hours trying to fix. I was finally able to fix using @kthorngren suggestion (field would need to be explicitly given an id)

    editor.on('open', function (e, mode, action) {
    $('#id').select2({
        dropdownParent: $('.modal')
    });
});

    The only downside of using this direct method is that I had to do it for each filed that used select2. So I found a workaround on the plugin website and customized it further to make it work on all select2 instances

    $('body').on('shown.bs.modal', '.modal', function () {
    $(this).find('select').each(function () {
        $(this).select2({
            dropdownParent: $('.modal')
        });
    });
});
Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.