primeng icon indicating copy to clipboard operation
primeng copied to clipboard

Dynamic Dialog footer scrolling issue

Open jbcbezerra opened this issue 8 months ago • 1 comments

Describe the bug

I am currently working with the PrimeNG Dynamic Dialog component and encountering an issue when trying to submit a form within my `A-Dialog-Component'. There are two approaches I’ve tried:

  1. Using a div with the 'p-dialog-footer' class: By defining a div in the template of A-Dialog-Component and marking it with the class p-dialog-footer, the form submission works. However, this method causes issues with scrolling and resizing, which do not function properly.

  2. Using a custom footer component: By defining a custom footer component (A-Dialog-Footer-Component) and including it in the template configuration when opening the dialog via dialogService.open(A-Dialog-Component, { ..., templates: { footer: A-Dialog-Footer-Component } }), the form submission only works when sending a event to the A-Dialog-Componen. This approach necessitates the use of an additional service for communication between the footer and the body components, where the service forwards events (e.g., onSaveEvent) to the body component.

The second approach seems inefficient as it requires creating a service solely for event forwarding for each dialog. Notice here, that we would need one extra service for each dialog where we have a custom footer component (probably in every form-dialog). While I respect your design choice, could you please address the scrolling issue in the first approach? This would benefit those of us who prefer not to implement an extra service for each dialog. Thank you!

Environment

clean angular cli application with only a dynami dialog

Reproducer

No response

Angular version

18.0.2

PrimeNG version

17.18.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.1

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Scrolling of the dynamic dialog to work properly when using a 'p-dyalog-footer' in the body.

jbcbezerra avatar Jun 21 '24 19:06 jbcbezerra