Sticky Headers + Horizontal Scrolling (sticky headers don't scroll)

Sticky Headers + Horizontal Scrolling (sticky headers don't scroll)

IMTanukiIMTanuki Posts: 50Questions: 10Answers: 0

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:
once sticky headers display, they don't scroll horizontally (i.e. header cols are out of sync with tbody cols).

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
} );

Answers

  • IMTanukiIMTanuki Posts: 50Questions: 10Answers: 0

    In the FWIW dept:

    headerOffset: $('#xmd-navbar').height() does not calc navbar height consistently, but headerOffset: $('#xmd-navbar').outerHeight() does.

    This doesn't affect the horizontal scrolling issue in this post, but for anyone who has different navbar heights (collapsed menu vs not collapsed), it might be useful.

Sign In or Register to comment.