Primeng: Table with scroll has misaligned headers if scrollbar is not visible

[brian428]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/primeng-scroll-table-header-offset-bug?file=src/app/app.component.html

Current behavior
Scrollable table headers are offset if table does not have enough rows to need a scrollbar.

Expected behavior
Headers and table columns should align correctly whether table has a scrollbar or not.

• PrimeNG version: 10.0.3

It looks like a fix for this long-standing problem was attempted in #9218, but that fix only seems to align the header correctly if the table has a scrollbar. Headers are offset if table has no scrollbar.

[zeatan]

I have the same issue.

A workaround I did is

.p-datatable-scrollable-body {
  overflow-y: scroll;
}

But this is annoying...

[cagataycivici]

This is fixed in 11.0.0-rc.1, will back port to LTS versions as well.

https://github.com/primefaces/primeng/commit/a365b7a360f16cfb3bd44ba018e9c6fa1626222e#diff-54f9fcc81f3c7d880cfe5f7ddd5dda1e60f15581a7ce88dd922b0586b1f259a1

[brian428]

@cagataycivici not sure if there was a regression, or if this actually wasn't fixed, but the problem is still present with PrimeNg 11.2.0. https://stackblitz.com/edit/primeng-scroll-table-header-offset-bug-11-2

[sandipchitale]

The fix seems to set: overflow-y: scroll. Does this mean that the design intent is to show scrollbar even when it is not needed? Generally we want to avoid showing scrollbars as much as possible.

[dcanning]

@cagataycivici not sure if there was a regression, or if this actually wasn't fixed, but the problem is still present with PrimeNg 11.2.0. https://stackblitz.com/edit/primeng-scroll-table-header-offset-bug-11-2

It is also still present in LTS 10.0.8:

https://stackblitz.com/edit/primeng-scroll-table-header-offset-bug-vsgdvf?file=package.json