Changing the position of p-growl

UI Components for Angular
Post Reply
Barathon
Posts: 2
Joined: 23 Jan 2018, 12:51

23 Jan 2018, 12:55

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
Posts: 94
Joined: 27 Apr 2017, 08:19

29 Jan 2018, 02:59

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

dev@mood-food.ch
Posts: 5
Joined: 26 Oct 2017, 11:15

10 Feb 2018, 17:14

Hi,

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

Cheers

Barathon
Posts: 2
Joined: 23 Jan 2018, 12:51

19 Feb 2018, 10:11

dev@mood-food.ch wrote:
10 Feb 2018, 17:14
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
Posts: 4
Joined: 21 Aug 2017, 18:10

20 Feb 2018, 17:21

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;
}

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest