CSS Conflict Bootstrap 5 FixedColumns vs Select

mattreba

I'm having an issue using the Bootstrap 5 versions of fixedColumns with Select.

http://live.datatables.net/hitaxami/1/edit?html,js,output

It looks like fixedColumns is setting a white background via the following rule which is overriding the 'selected' class on parent <tr> elements for components that are not fixedColumn-related.

table.dataTable tbody tr td {
background-color: #fff;
}

Is there an issue with what css files I linked to?

allan

That does indeed look like a bug! I'll get back to you about this tomorrow.

Allan

allan

I've just made two commits to address this issue (FixedColumns and Select both needed tweaks).

Those changes will be in the nightlies shortly.

Also please note that I've tested this only against Boostrap 5.1.3. I would expect it to not be right with 5.0.x as they changed show the row striping is done in 5.1.2.

Allan

mattreba

Thank you for the quick response. I'll update my bootstrap version and test with nightlies.

mattreba

I've confirmed this is working for me, as well. Thanks again.

EstebanE

Hi, I'm experiencing this issue but I'm unable to find the distributed fix anywhere. I see the changes tagged on Github for v1.4.0 but neither npm nor direct download from https://datatables.net/download/ provides me with this fix. Was this removed? Thanks in advance.

kthorngren

@EstebanE The combination of Bootstrap 5, FixedColumns 4.1.0 and Select 1.4.0 seems to work in this test case:
http://live.datatables.net/xunepivu/1/edit

Please update the test case or provide a link to your page to show the issue you are having. Make sure you have included the Datatables BS 5 integration files in your site. Use the Download Builder to get the appropriate files.

Kevin

EstebanE

@kthorngren I see, my issue was I didn't pull down both the latest on datatables.net-select-bs5 and the core datatables.net-bs5 which contains some selection logic that used to exist in select. All sorted now on latest versions, thanks!