className not working on buttons
className not working on buttons
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
This discussion has been closed.
Replies
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:
Try this (I didn't test this):
@allan will need to update the example to reflect the proper selectors to use.
Kevin
https://oostveen-advies.eu/boot2/testclass/bankboek.html
I am using bootstrap5 and className "btn btn-primary" doesn't work:
are you suggesting I create my own definitions for the colors?
Thanks,
Jan
HI Jan,
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:This is the list of classes that the Bootstrap 5 integration for Buttons set.
Allan
Perfect!