className not working on buttons

Ficos

https://datatables.net/extensions/buttons/examples/initialisation/className

I noticed that the colours on the buttons are gone. I have the same issue, using Bootstrap5 it seems colours on buttons are no longer allowed?
Does it matter in which order my files are loaded?

I have this now:

<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css'/>
        <link href="../dt/datatables.min.css" rel="stylesheet">
 

        <!-- 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.2/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.0/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="stylesheet" type="text/css" href="../Editor-PHP-2.3.2/css/editor.bootstrap5.min.css">
        <!-- link rel="stylesheet" type="text/css" href="../css/editor.bootstrap5.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">
    
        <script src="../dt/datatables.min.js"></script>
        <!-- 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.2/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.0/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="../dt/Editor-2.3.1/js/dataTables.editor.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="../dt/Editor-2.3.1/js/editor.bootstrap5.min.js"></script>
        <!-- datetime -->
        <script src="../js/moment-with-locales.js"></script>
        <script src="../js/datetime-moment.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>

Thanks,
Jan

kthorngren

Inspecting the page of the example you linked to the CSS applied (see the CSS tab) is being overridden. You will probably need to provide a more specific CSS. Instead of this:

    .dt-button.orange {
        color: orange;
    }

Try this (I didn't test this):

div.dt-buttons > .dt-button.orange {
  color: orange;
}

@allan will need to update the example to reflect the proper selectors to use.

Kevin

Ficos

https://oostveen-advies.eu/boot2/testclass/bankboek.html
I am using bootstrap5 and className "btn btn-primary" doesn't work:

layout: {
            topStart: {
                buttons: [
                    { extend: 'create', className: "btn btn-primary", text: '<i class="fa fa-plus"></i> nieuw', editor: editor },
                    { extend: 'edit', className: "btn btn-primary",text: '<i class="fa fa-pencil"></i> wijzigen', editor: editor },
                    { extend: 'remove', className: "btn btn-primary", text: '<i class="fa fa-minus"></i> verwijder', editor: editor },
                ]
            }
        },

are you suggesting I create my own definitions for the colors?

Thanks,
Jan

allan

HI Jan,

btn btn-secondary buttons-create btn-primary

Is the class that is being applied to the button. The issue is that I've got it doing btn-secondary by default. So to stop that, do:

DataTable.Buttons.defaults.dom.button.className = 'btn';

This is the list of classes that the Bootstrap 5 integration for Buttons set.

Allan

Ficos

Perfect!