bootstrap-table icon indicating copy to clipboard operation
bootstrap-table copied to clipboard

StickyHeaders Header Row does not align when scrolling

Open objecttothis opened this issue 1 year ago • 7 comments

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. image

But as soon as you scroll all column alignment is thrown off and the formerly hidden columns become visible image

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

image

image

Possible Solutions

No response

Additional Context

No response

objecttothis avatar Dec 08 '23 11:12 objecttothis

@wenzhixin no rush, but I'm curious if you have an estimate for which release we can expect this issue to be addressed in?

objecttothis avatar Feb 06 '24 09:02 objecttothis

@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.

objecttothis avatar Mar 26 '24 21:03 objecttothis

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)

objecttothis avatar Jul 23 '24 11:07 objecttothis