primefaces / primefaces/primeng

[p-table] Filter overlay expands off the screen without any ability to either scroll or reorient the overlay

Open
#19,081 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Resolution: Stale Status: Needs Triage
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
  1. Go to the linked reproducer.
  2. Click any of the filter icons for the columns in the table to open the filter overlay.
  3. Click Add Rule.
  4. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.