Dynamic Dialog: Possibility to style header

[pistage]

Describe the feature you would like to see added

I would like to request the addition of a feature that allows users to style the background and other visual elements of the header within the dynamic dialog. Currently, there's limited flexibility in customizing the header's appearance, and I believe this enhancement will greatly improve the user experience.

Is your feature request related to a problem?

Yes, it is. When using dynamic dialogs, I often find myself limited in terms of header customization.

Describe the solution you'd like

I propose enabling users to have more control over the styling of the header within the dynamic dialog. This should include the ability to:

• Customize the background color or image of the header.
• Adjust the font, text color, and alignment of the header title or content.
• Apply CSS styles or themes to the header for a consistent look and feel with the rest of the application.

Describe alternatives you have considered

I have explored alternative solutions, such as creating custom dialog components, but these approaches often involve significant development effort and can lead to code duplication. Having built-in support for customizable header styling would simplify the process and improve code maintainability.

Additional context

No response

[bvx5009]

i was able to customize a dynamic dialog by passing a class and editing the dialog css for that nested class

    this.ref = this.dialogService.open(MyComponent, 
      { 
          ...
        styleClass: 'my-class-here'
         ...
      }

sass:

.my-class-here  {
    .p-dialog-header {
        border-bottom: 1px solid var(--surface-border);
    }
    .p-dialog-content {
  //something here
    }
    .p-dialog-header, .p-dialog-content, .p-dialog-footer {
        background-color: var(--surface-b);
    }
}

i've used variables for consistent themes across the app as well.

However, i think it would be beneficial to have a custom header template with dynamic dialogs... insert custom avatars, buttons, dropdowns etc.

EDIT:

after more searching i found that you can specify templates which would allow you to do what you want:

this.ref = this.dialogService.open(MyComponent, 
      { 
        styleClass: 'review-comment-dialog',
        templates: {
          header: MyHeaderComponent
        }
      }

[mehmetcetin01140]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,