Primeng: <p-growl> doesn't change color according to severity

[flavioasrocha]

[X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
Background of the notification doesn't change(it's always white), although the icon change according to severity value.

Expected behavior
Notification background color changes according to severity value

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
Creating a notification service, where it can handle more than one notification at the same time, with different severity

Please tell us about your environment:

• Angular version: ^5.2.0X
  

• PrimeNG version: ^5.2.0X
  

• Browser: Chrome 63.0.3239.84 (x64)
  

• Language: "typescript": "~2.5.3"

[mlangwell]

We are experiencing the same problem with our growls

this._messageService.add({ severity: 'info', summary: 'Saved', detail: 'Settings have been saved.' });

Shows yellow growls still but updates the icon

[mlangwell]

Looking through the CSS I do not see the classes that the growl is targeting for the different severity's.

'ui-growl-message-info':msg.severity == 'info',
'ui-growl-message-warn':msg.severity == 'warn',
'ui-growl-message-error':msg.severity == 'error',
'ui-growl-message-success':msg.severity == 'success'

However, I do see:

ui-messages-warn
ui-messages-error
ui-messages-success

[upondeep]

Same issue here. Any solutions?

[cagataycivici]

We could not see the issue, please provide a plunkr;

http://plnkr.co/edit/qtZi5lB3DjkNt7Kdivg9?p=preview

[memetz]

Hi Cagatay,
thanks for replying. I deleted the comment shortly after I posted it on the
issue coz I found out there was a bug in my code, so all good. Sorry for
any inconvenience and thanks for the hard work you are putting on.
cheers

https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail
Virus-free.
www.avast.com
https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail
<#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

On 25 April 2018 at 15:10, Çağatay Çivici [e-mail] wrote:

We could not see the issue, please provide a plunkr;

http://plnkr.co/edit/qtZi5lB3DjkNt7Kdivg9?p=preview

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/5141#issuecomment-384162384,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGufd2ZEIbk0QE33_H8A00afXi3V3o8Eks5tsAU3gaJpZM4SFWFT
.

[upondeep]

K, I solved it by using css

.ui-growl-message-error .ui-growl-item {
  background-color: #cc3f3c;
}

.ui-growl-message-info .ui-growl-item {
  background-color: #3877d4;
}

.ui-growl-message-warn .ui-growl-item {
  background-color: #f5de0e;
}

.ui-growl-message-success .ui-growl-item {
  background-color: #42A948;
}

[chrispruitt]

Experiencing the same issue. No color change. Icons do change, but I also seem to be missing some css in the item container.

[cagataycivici]

As we're unable to replicate, if the issue still persists, please create a new ticket and provide a stackblitz link that demonstrates the problem;

https://stackblitz.com/github/primefaces/primeng-issue-template