Page with multiple <Dialogs /> but different background colors

UI Components for Vue
Post Reply
amodv81
Posts: 3
Joined: 11 Oct 2022, 04:12

07 Dec 2022, 14:02

Hi,
My page has multiple functionalities that open inside different dialogs (<Dialog />). Few dialogs require a white background, while on that same page few other dialogs requires a complete black background. Since the Dialog and its css is added to the body, I cannot keep a scoped style per dialog component to make it work with different backgrounds. The background color does not change to the one expected even though each dialog and its holding component override the .p-dialog .p-dialog-header and content css with the background. It sticks to the background of the dialog which is 1st loaded and sticks to the body. Note: even though there are multiple dialogs on the page - at a single point in time, only 1 is shown and usable.

Any help is appreciated.
Thanks

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

14 Dec 2022, 15:35

Hi,

You could add a specific class or style to the Dialog component for your different cases.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests