Changing the position of p-growl

[Barathon]

Hi,

Is it currently possible to change the location of a p-growl? It appears in the top right corner by default, but I would like to move it to the left instead. On https://stackoverflow.com/questions/401 ... components I read something about using :host and ::ng-deep, but I think it would be better to have a native solution. Does anyone have an idea how I could change the position?

Thanks

[paulswan]

I haven't tried it but you would need to override the ui-growl class.

[dev@mood-food.ch]

Hi,

made it like this:
----------------
.ui-growl {
top: 5em !important;
right: 1em !important;
}

Cheers

[Barathon]

Hi,

made it like this:
----------------
.ui-growl {
top: 5em !important;
right: 1em !important;
}

Cheers

Hey, Thanks for the reply. Yeah I've done the same. The problem was that I was trying to do this in the css file of a component (e.g. app.component.css), but that didn't work. It does however work when I put the css in the styles.css file.

[cestrada84]

You need to do it at style.css project level, that works for me, let's say example for a dropdown override CSS
/*set prime dropdown control background transparent*/
.primeDrop .ui-state-default {
background: transparent;
}