Possible Conflict w/ Bootstrap 5 / Custom CSS (???)

IMTanuki

Hi - brand new to dt (impressive so far!) and I'm running into what seems to be a few conflicts with bootstrap and custom classes...

environment:
- bootstrap 5.0.1
- jquery 3.6.0
- dt src https://cdn.datatables.net/v/bs5/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/cr-1.5.4/date-1.1.0/fc-3.3.3/fh-3.1.9/kt-2.6.2/r-2.2.9/rg-1.1.3/rr-1.2.8/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.js"></script>

problem(s):
the following worked before dt install, but are not working now:
- some bs5 classes (e.g. table-hover)
- my custom classes (e.g. xmd-table-bordered-outside that formats top, bot, left and right side borders)

the following dt classes are not working:
- cell-border, row-border
- dt-head-right

comments/questions:
- I'm guessing this is a specificity issue (?) -or- a sequencing issue in imports
- should I simply comment out the bootstrap _table.scss import and use only dt classes?
- do you recommend downloading the whole pkg and integrating the dt scss into my build (bootstrap + custom scss)?

test case:
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html

table tags:

<

table id="table-sandbox"
class="table table-striped // vanila bs5 class - workinng
table-hover // vanilla bs5 class - not working
cell-border row-border // dt classes - not working
dt-head-right // dt class - not working
xmd-table-bordered-outside // my custom class - not working
">
<thead>...

dt function;
$ ( '#table-sandbox' ).DataTable ( {
autoWidth: true,
fixedHeader: {
header: true,
headerOffset: $('#xmd-navbar').height()
},
scrollX: true,
scrollY: true,

            columnDefs: [ {
                width: "25px",
                targets: [ 0 ]
            }, {
                width: "100px",
                targets: [ 1,2, 3, 4, 5 ]
            }
            ],

        } );

Thx in advance and again - great product!

IMTanuki

Just to clarify - I tried using the classes listed in the table tag above separately and in various combinations. I just listed them together to highlight the ones I'm having problems with...

IMTanuki

So - looks like the bootstrap table was modified a bit between the last beta and 5.0.1...

custom outside border - working
table-hover - working
default bootstrap cell border - working

the only items still not working are the dt classes: cell-border, row-border, dt-head-right, etc...I can do my own custom classes, but if dt has working classes, I'd like to take advantage of those...

is it possible that I didn't include these classes when I configured the CDN string? I thought I checked everything...

IMTanuki

Since I can customize bootstrap's _tables.scss to format just about everything inside the table, this issue is not critical.

But...for future reference - is there any known conflict between DT's cell formatting classes and bootstrap - or - is there any known issue with classes like cell-border when used with bootstrap.

allan

Hi,

the only items still not working are the dt classes: cell-border, row-border, dt-head-right, etc...I can do my own custom classes, but if dt has working classes, I'd like to take advantage of those...

The dt-* classes are specific to the DataTables stylesheet. Bootstrap has it's own text alignment classes, which you would use when using Bootstrap.

That said, you aren't the first to ask about that, and we will be including them in future - but for the moment, use Bootstrap's typography controls.

Regarding conflicts - we don't yet use Bootstrap's CSS variables for colour adjustments, but likewise that is something we will look at in the future.

Allan

IMTanuki

Alan,

Again, many thanks for such a quick reply.

It looks like your bs5 implementation is consistently using the bs classes, so I'm not sure it would even be necessary to use _variables directly.

I still need to test this, but so far it looks like the generated code for the controls is referencing standard bootstrap classes....so, I think it's a non-issue!

allan

Right enough - I had thought our integration stylesheet set a colour or two, but looking over it that isn't the case. So yup, should be good to go .

Allan