StickyHeaders Header Row does not align when scrolling

objecttothis commented 10 months ago

Bootstraptable version(s) affected

1.22.1 - 1.23.1

Description

PHP 8.2.12, Bootstrap-table 1.22.1 - 1.23.1

I have StickyHeaders enabled but as soon as you scroll the table, the off-screen portion of the header becomes visible and column alignment is gone.

<script type="text/javascript">
    $(document).ready(function()
    {
        <?= view('partial/bootstrap_tables_locale') ?>

        $('#table')
            .addClass("table-striped")
            .addClass("table-bordered")
            .bootstrapTable({
                columns: <?= transform_headers(esc($headers, 'js'), true, false) ?>,
                stickyHeader: true,
                stickyHeaderOffsetLeft: $('#table').offset().left + 'px',
                stickyHeaderOffsetRight: $('#table').offset().right + 'px',
                pageSize: <?= $config['lines_per_page'] ?>,
                sortable: true,
                showExport: true,
                exportDataType: 'all',
                exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'xlsx', 'pdf'],
                pagination: true,
                showColumns: true,
                data: <?= json_encode(esc($data, 'js')) ?>,
                iconSize: 'sm',
                paginationVAlign: 'bottom',
                escape: false,
                search: true
        });
    });
</script>