Open bdi-gud opened 2 years ago
Same problem with autoLayout="true"
.
According to https://developer.mozilla.org/en-US/docs/Web/CSS/position#values, position: sticky
works like this:
a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.
When we use responsive/auto layouts in p-table
s, one of the following CSS rules is applied:
.p-datatable-auto-layout > .p-datatable-wrapper {
overflow-x: auto;
}
.p-datatable-responsive-scroll > .p-datatable-wrapper {
overflow-x: auto;
}
This means that sticky elements stick to the datatable wrapper, not to the document body!
Because the table does not scroll vertically (at least not by default), we get the impression that sticky
doesn't work. But in reality, it just sticks to the wrong element :(
I'm not sure how this can be fixed or worked around.
I have similar problem. Was trying to use Group Columns with sticky header. Was able to kind of fix it but got very ugly border view bugs that i am unable to fix. (Border in group column headers became transparent and u can see whats under the header) Demo https://stackblitz.com/edit/primeng-tablecolgroup-demo-igkyzq?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp.component.ts
Hi,
So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!
Best Regards,
@mertsincan it looks like the problem is still present, see this fork of the Stackblitz, updated to PrimeNG 14.2.2:
If you remove responsiveLayout="scroll"
, the header sticks correctly.
Hi.
This bug persists in Prime NG v16.0.0-rc.1
Please, help us.
Thanks.
any updates?
Hi,
Facing same issue. With responsiveLayout="scroll"
sticky headers are not working.
PrimeNg Version - 14.2.10
Is there any workaround or a permanent fix?
Any update on this yet?
I'm submitting a ... (check one with "x")
Current behavior When we set the property responsiveLayout="scroll" to a table, the sticky header don't work.
Expected behavior The same behaviour as responsiveLayout="stack"
Minimal reproduction of the problem with instructions https://stackblitz.com/edit/primeng-tablesticky-demo Edit primeng sticky demo and add the property responsiveLayout="scroll" to the table
I also tried to set [scrollable]="true" and scrollHeight="flex" as discuss in #11099. The result is the same.
What is the motivation / use case for changing the behavior? To improve the user experience on our applications
Please tell us about your environment:
Angular version: v13
PrimeNG version: 13.3.3
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Tested on Chrome