Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table with scroll has misaligned headers if scrollbar is not visible #9413

Closed
brian428 opened this issue Oct 14, 2020 · 6 comments
Closed

Table with scroll has misaligned headers if scrollbar is not visible #9413

brian428 opened this issue Oct 14, 2020 · 6 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@brian428
Copy link
Contributor

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
Copy link

zeatan commented Oct 15, 2020

I have the same issue.

A workaround I did is

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

But this is annoying...

@cagataycivici cagataycivici added this to the 10.0.4 milestone Oct 17, 2020
@cagataycivici cagataycivici self-assigned this Oct 17, 2020
@cagataycivici cagataycivici added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Oct 17, 2020
@cagataycivici cagataycivici modified the milestones: 10.0.4, 10.1.0 Oct 19, 2020
@cagataycivici cagataycivici added the LTS-PORTABLE Issue's fix will be ported to supported LTS versions label Nov 17, 2020
@cagataycivici
Copy link
Member

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

a365b7a#diff-54f9fcc81f3c7d880cfe5f7ddd5dda1e60f15581a7ce88dd922b0586b1f259a1

@yigitfindikli yigitfindikli added LTS-FIXED-9.1.9 and removed LTS-PORTABLE Issue's fix will be ported to supported LTS versions labels Nov 20, 2020
@brian428
Copy link
Contributor Author

brian428 commented Feb 1, 2021

@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
Copy link
Contributor

sandipchitale commented Feb 2, 2021

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
Copy link

dcanning commented Feb 22, 2021

@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

@wondie
Copy link

wondie commented Aug 5, 2022

The issue is still present in Primeng 14.0.0 if there horizontal scrollbar. To reproduce shrink the preview box. https://stackblitz.com/edit/primeng-scroll-table-header-offset-bug-11-2-gowmsr?file=src%2Fapp%2Fapp.component.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

7 participants