css issues?

menashe

In trying to implement bootstrap5 (as per Alan's previous message) I get the following weird red "arrow":

I understand that it is (almost?) certainly the CSS files. I have been trying every permutation of files. How do I figure out (or narrow down) why the issue is occurring?

allan

Looks like a mismatch of the CSS versions. Use the download builder to get the latest versions of everything DataTables related.

Failing that, send me a link to the page and I'll take a look.

Allan

menashe

I give up!

Here are my .js and .css files; many are commented out, but I still get that nasty, red down-arrow (previous message):

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.bootstrap5.min.js"></script>
<!-- <script src="https://cdn.datatables.net/select/2.0.0/js/dataTables.select.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/select/2.0.0/js/select.bootstrap5.min.js"></script> -->
<script src="https://cdn.datatables.net/datetime/1.5.2/js/dataTables.dateTime.min.js"></script>

<!-- <script src="https://cdn.datatables.net/colreorder/2.0.0/js/dataTables.colReorder.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/responsive/3.0.0/js/responsive.bootstrap5.js"></script> -->
<!-- <script src="https://cdn.datatables.net/rowreorder/1.5.0/js/dataTables.rowReorder.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/scroller/2.4.1/js/dataTables.scroller.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/searchbuilder/1.7.0/js/dataTables.searchBuilder.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/searchbuilder/1.7.0/js/searchBuilder.bootstrap5.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/searchpanes/2.3.0/js/dataTables.searchPanes.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/searchpanes/2.3.0/js/searchPanes.bootstrap5.min.js"></script> -->

<!-- <script src="https://cdn.datatables.net/v/dt/dt-1.13.8/datatables.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.js"></script> -->

<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> -->

<script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-1.13.6/b-2.4.2/date-1.5.1/sl-1.7.0/datatables.min.js"></script>

<script type="text/javascript" src="Editor-PHP-2.3.2/js/dataTables.editor.js"></script>
<script type="text/javascript" src="Editor-PHP-2.3.2/js/editor.bootstrap5.js"></script>

<!-- <script type="text/javascript" src="Multi-column-Dropdown-Plugin-jQuery-Inputpicker/src/jquery.inputpicker.js"></script> -->

<!-- Popper -->
<script src="https://unpkg.com/@popperjs/core@2"></script>

<!-- Moment.js -->
<!-- https://momentjs.com/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

<!-- Selectize -->
<!-- https://selectize.dev/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- JsBarcode -->
<!-- https://github.com/lindell/JsBarcode -->
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>

<!-- jQuery UI Autocomplete -->
<!-- https://api.jqueryui.com/autocomplete/ -->
<!-- <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> -->

   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/3.0.1/css/buttons.bootstrap5.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.datatables.net/select/2.0.0/css/select.bootstrap5.min.css" rel="stylesheet"> -->
    <link href="https://cdn.datatables.net/datetime/1.5.2/css/dataTables.dateTime.min.css" rel="stylesheet">
 
    <!-- <link href="https://cdn.datatables.net/colreorder/2.0.0/css/colReorder.bootstrap5.min.css" rel="stylesheet"> -->
    <!-- <link href="https://cdn.datatables.net/responsive/3.0.0/css/responsive.bootstrap5.min.css" rel="stylesheet"> -->
    <!-- <link href="https://cdn.datatables.net/rowreorder/1.5.0/css/rowReorder.bootstrap5.min.css" rel="stylesheet"> -->
    <!-- <link href="https://cdn.datatables.net/scroller/2.4.1/css/scroller.bootstrap5.min.css" rel="stylesheet"> -->
    <!-- <link href="https://cdn.datatables.net/searchbuilder/1.7.0/css/searchBuilder.bootstrap5.min.css" rel="stylesheet"> -->
    <!-- <link href="https://cdn.datatables.net/searchpanes/2.3.0/css/searchPanes.bootstrap5.min.css" rel="stylesheet"> -->

    <link href="https://cdn.datatables.net/v/dt/dt-1.13.8/datatables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/v/bs5/dt-1.13.4/date-1.4.1/datatables.min.css" rel="stylesheet" />

    <!-- <link href="http://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet"> -->

    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" rel="stylesheet" integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- <link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" /> -->

    <!-- <link href="https://cdn.datatables.net/v/bs5/dt-1.13.6/b-2.4.2/date-1.5.1/sl-1.7.0/datatables.min.css" rel="stylesheet"> -->

    <!-- <script type="text/css" src="Editor-PHP-2.3.2/css/editor.dataTables.min.css"></script> -->
    <script type="text/css" src="Editor-PHP-2.3.2/css/editor.bootstrap5.css"></script>

    <!-- <script type="text/css" src="Multi-column-Dropdown-Plugin-jQuery-Inputpicker/src/jquery.inputpicker.css"></script> -->

    <meta name="csrf-token" content="{{ csrf_token() }}">

kthorngren

In the first code snippet you are loading datatables twice. First Datatables 2.0.2 in line 4 then 1.13.6 in line 28. You will want to comment or remove line 28.

Same issue with CSS. Line 2 you are loading Datatables 2.0.2 CSS. An you are loading Datatables. 1.13.8 CSS in lines 14 and 15.

You need to make sure to load only one set of JS and CSS libraries. I haven't reviewed the code in detail but you might have other conflicting CSS and JS files. Remove ALL the Datatables libraries. Use the download builder to generate a concatenated CDN of 2.0.2 and desired extensions to copy into your page.

Kevin

menashe

Kevin,

OK, that did "reset" everything, but my table display is back to:

If you look at my first message in this thread, you'll see what it should look like--striping, nicer arrows, vertical spacing, the page selection on the right,...

It's been so long since I implemented that/those that I don't remember what is was!

Does that ring a bell?

kthorngren

Take a look at this Bootstap 5 example. Click the HTML tab to see the classes assigned to the table tag. Review the BS 5 table classes doc for more optinos.

Kevin

menashe

Kevin,

Thank you!! And I guess, since I just added Bootstrap 5 classes, that my table is displaying using Bootstrap 5!

Still unclear--how do I verify that my Editor Forms are also using Bootstrap 5? Visually, I can't tell (but I don't think they are).

allan

If it displays in a Bootstrap 5 modal, then it is. You can check the classes to make sure it is Bootstrap classes (e.g. modal).

Allan

menashe

That's what I figured!