DataTables 1.11.4 and Bootstrap 5 has height of 2px

DataTables 1.11.4 and Bootstrap 5 has height of 2px

Wooly65Wooly65 Posts: 85Questions: 25Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

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

    Thanks,
    Allan

  • kthorngrenkthorngren Posts: 21,322Questions: 26Answers: 4,948

    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

  • Wooly65Wooly65 Posts: 85Questions: 25Answers: 1
    edited February 2022

    @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

  • Wooly65Wooly65 Posts: 85Questions: 25Answers: 1

    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>
    
  • Wooly65Wooly65 Posts: 85Questions: 25Answers: 1
    edited February 2022

    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.

  • Wooly65Wooly65 Posts: 85Questions: 25Answers: 1

    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.

  • Wooly65Wooly65 Posts: 85Questions: 25Answers: 1
    edited February 2022

    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.

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 21,322Questions: 26Answers: 4,948

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

    Kevin

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    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

  • kthorngrenkthorngren Posts: 21,322Questions: 26Answers: 4,948

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

    Kevin

Sign In or Register to comment.