primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.29k stars 4.56k forks source link

p-columnfilter: Table Filter can appear off the page #12659

Open GitHubStan opened 1 year ago

GitHubStan commented 1 year ago

Describe the bug

Table Filter p-columnfilter can appear off the page.

Note: If it's a filter on the right-most column on a grid that is wider than the window, it can make the filter un-usable.

Environment

Chrome 109.0.5414.120 (Official Build) (64-bit) viewing PrimeNg sample page

Reproducer

https://stackblitz.com/edit/primeng-tablefilter-demo-9puhlg?file=src/app/app.component.html

Angular version

15.1.5

PrimeNG version

15.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.13.0

Browser(s)

Chrome 109.0.5414.120 (Official Build) (64-bit)

Steps to reproduce the behavior

  1. Open the table filter example https://primeng.org/table/filter for V15.2.0
  2. View the first grid on the page titled 'Filter Menu'
  3. Adjust the size of the browser window until the Date filter icon is just on the right edge of the example card
  4. Click the filter icon
  5. Scroll down to the second grid titled 'Filter Row'
  6. Adjust the size of the browser window until the 'Status' column filter is mostly off the right side of the example card.
  7. Click the 'Status' field's filter.

Expected behavior

After steps 4 & 7, the entire resulting filter window appears on the screen

Actual Results:

After step 4, the entire resulting filter window does appear on the screen, but after step 7 the resulting filter window is mostly off the screen and un-usable. If that happens to be the right-most column on the grid, then the grid will expand. But if you try to scroll over to view the filter window, the window closes. That makes the filter entirely un-usable in some situations (which is the case for me). FilterOffScreen

jducos33 commented 3 months ago

Any news since 2023 ? I am facing the same issue.

Thx !