bootstrap-table
bootstrap-table copied to clipboard
StickyHeaders Header Row does not align when scrolling
Bootstraptable version(s) affected
1.22.1 - 1.23.5
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>
Example(s)
In the unSticky position (scroll to the top), everything looks fine.
But as soon as you scroll all column alignment is thrown off and the formerly hidden columns become visible
This can be seen on the example for sticky headers: https://examples.bootstrap-table.com/#extensions/sticky-header.html both in Edge and Firefox. Untested in Chrome
Possible Solutions
No response
Additional Context
No response
@wenzhixin no rush, but I'm curious if you have an estimate for which release we can expect this issue to be addressed in?
@wenzhixin can you tell me if this bugfix is on the roadmap or will it be a while still? Tested today with 1.22.4, but it's still an issue.
This is still broken in 1.23.1 (https://examples.bootstrap-table.com/index.html?bootstrap3#extensions/sticky-header.html) and (https://examples.bootstrap-table.com/index.html?bootstrap5#extensions/sticky-header.html)