DataTables 1.11.4 and Bootstrap 5 has height of 2px

Wooly65

I just upgraded to DataTables 1.11.4 using BootStrap 5 and noticed a extra little sliver of a row just before the first data row. It seems the <thead><tr> has a height of 2px where has before it had 0px. Has anyone noticed this? Is it an old artifact of mine somewhere?

DataTables 1.10.19 and Bootstrap 4

DataTables 1.11.4 and Bootstrap 5

allan

Can you link to a page showing the issue so I can debug it please?

Thanks,
Allan

kthorngren

Looks like you have conflicting CSS. The Submission Date column shows the Bootstrap style sorting icons where the Assay column shows the default Datatables styled sorting icons.

Looks like you are loading both jquery.dataTables.css and dataTables.bootstrap5.css. You should only be loading the second. See the BS5 example and styling docs for more details. Use the Download Builder to get the appropriate integration files for BS5.

Kevin

Wooly65

@allan - The site is behind a firewall. I will see if I can produce something. So obviously no one else has reported this. So it must be me somewhere in my code, but all I did was upgrade.

@kthorngren - The sorting icons are my CSS overrides. I was not a fan of the separate up/down arrows

Wooly65

I will get a soda and start digging through the code.

styles for the odd <tr style="height: 2px;">

The html is defined as (same before and after I upgrade:

<table id="summaryPendingTable" class="display nowrap table table-striped table-bordered table-hover table-sm dataTable no-footer dtr-inline" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Submission Date</th>
            <th>Assay</th>
            <th>Processing Type</th>
            <th>Submitted For</th>
            <th>Submitted For ID</th>
            <th>Submitted By</th>
            <th># of Files</th>
            <th>Files</th>
            <th>Comments</th>
            <th>Comments</th>
            <th>Details</th>
        </tr>
     </thead>
</table>

Wooly65

Found it. The class table-bordered causes the height: 2px.

I slowly removed certain classes since your examples are super simple class="table table-striped dataTable" to see what might be causing it.

I will look further to see.

Wooly65

Where a can't duplicated the issue with this example:

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

But will keep looking.

Wooly65

Ok, here is it duplicate.

live.datatables.net/nufifoqu/3/edit

I have include both Bootatrap4 and Boostrap5 js and css that can be uncommented. It does show Boostrap4 is OK, but Boostrap5 does seem to add the 2px.

allan

Fantastic - thanks for the test case! The error is in my use of jQuery's .height() method which doesn't just do CSS height: 0, rather it takes account of the box model being used. I should have just set the CSS height to 0, which I now do. The nightly will be up to date with that change shortly

Allan

kthorngren

@allan I noticed the headers don't move with scrollY.

Kevin

allan

You mean horizontally? Yes, they need scrollX enabled for that to work.

I've been thinking that when scrollY is enabled then x-scrolling should probably be automatically enabled to avoid that sort of error.

Allan

kthorngren

Right scrollX I wasn't thinking about what I was looking at.

Kevin