Growl positioning being ignored

UI Components for React
Post Reply
alarinn
Posts: 33
Joined: 15 May 2012, 22:27

29 Apr 2019, 20:53

The documentation states that to position the Growl message to use the position property. It seems if I use values like bottomright the default position of topright is being used instead. Here's my snippet:

Code: Select all

        return (
            <div>
                <Growl ref={(el) => this.growlp = el } position='bottomright'/>
                {defaultView}
                {assetFormDialog}
                {assocAssetsFormDialog}
            </div>
I did dive in into the base code to see if I could spot the error and I found that when I popup the message, Dev Tools shows this:

body .p-growl {
top: 70px;
opacity: 0.9;
filter: alpha(opacity=90);
}

The correct .p-growl-bottomright values are indicated but that top: 70px in the above css is what is causing the popup to display in the topright. If I comment that out, the popup renders on the bottomright. I have no idea where that value is coming from because the growl.css file shows:

.p-growl {
position:fixed;
width: 20em;
}

There is no top attribute but Dev Tools indicates that is the issue.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests