Component: Table cell-edit with p-calendar

[erber014]

Describe the bug

When using p-calendar in a p-table with cell-edit the calendar pop-up does not open up correctly.

As can be seen in the above screenshot, the pop-up opens "inside" the table with scrollbars horizontally and vertically which partially obscures/hides the pop-up depending on how much initial space the table is taking up.

Environment

PrimeNG 17.6.0, modified stackblitz of Table-components cell-edit demo.

Reproducer

(https://stackblitz.com/edit/r8c8lb?file=package.json)

Angular version

17.05

PrimeNG version

17.6.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

No response

Steps to reproduce the behavior

Click on a cell in the column farthest to the right (calendar). The pop-up where you can select a date opens "inside" the table, causing scrollbars to appear and hiding part of the pop-up.

Expected behavior

When clicking on a p-calendar inside a cell-editable p-table the pop-up should open "over" the table so it is fully visible/usable.

[erber014]

Can just mention that I have the same problem with dropdowns (haven't tried multiselects but this might not work well either).

[ordorub]

You should add appendTo="body" to your calendar

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!