I've been struggling to fix the positioning of my growl message at the bottom right corner by overriding the CSS classes of p-growl. Initially, I attempted to override the .ui-growl class like this:
::ng-deep .ui-growl {
position: fixed;
bottom: 0;
right: 0;
border: 3px solid #73AD21;
}
(The border was just for testing purposes.)
However, this caused the growcontainer to stretch from top to bottom and stick to the bottom right, but the actual message inside still appeared at the top. So, in my second attempt, I applied the CSS rules directly to the message element using .ui-growl-item.
While this did make the growl message stick to the bottom right as desired, it also seemed to overwrite other default styles within .ui-growl-item, making the growl nearly invisible instead of its usual green or red color.
I've attached an image highlighting the issue with a pink arrow pointing to the affected growl. All you can see are faint white letters and part of the error cross symbol while the background remains visible.
Does anyone have any suggestions on how I could implement the necessary CSS rules for the growl without interfering with existing styles that I do not want to alter? I found the default file here , but I'm unsure which specific default CSS rules are crucial to maintain the color variations for different message types (error, success, etc.).
UPDATE:
I experimented with using top and left as alternatives to achieve the same positioning, but it proved impractical because larger messages risked extending off-screen while smaller ones failed to stay at the bottom consistently.