primefaces / primefaces/primeng
[p-table] Filter overlay expands off the screen without any ability to either scroll or reorient the overlay
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.5k
- Forks
- 5.1k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
When a table is too close to the bottom of screen, opening a filter overlay and adding a second filter will cause the overlay to extend off the bottom of the screen.
Pull Request Link
No response
Reason for not contributing a PR
- Lack of time
- Unsure how to implement the fix/feature
- Difficulty understanding the codebase
- Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/mwmdxcpn-7upl6rwz?file=src%2Fapp%2Ftable-basic-demo.html
Environment
All environments
Angular version
20.0.4
PrimeNG version
v20
Node version
22.9.0
Browser(s)
No response
Steps to reproduce the behavior
- Go to the linked reproducer.
- Click any of the filter icons for the columns in the table to open the filter overlay.
- Click Add Rule.
- Note that the panel now expands off the bottom of the page causing a scroll bar to appear unnecessarily.
Expected behavior
The panel should either change it's orientation to go upwards or turn into a scrollable panel when the panel expands off the screen.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproducer and the p-table filter overlay behavior: open a column filter, click Add Rule, and inspect how the panel is positioned near the bottom of the viewport. Done means the overlay remains usable by reorienting upward or becoming scrollable without introducing an unnecessary page scrollbar.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100