CODEWITHSUNDEEP
cssjsfprimefaces
Armen Arzumanyan
Armen Arzumanyan

Reputation: 2043

How can I put two primefaces growl in the same page with different positions?

I need put several p:growl component in the same page in the different positions One in the left, one in the right, and one in the center. But If I am overriding style it is affected in all growls like this:

 <style type="text/css">
            .ui-growl{
                left:100px;
            }
        </style>

It is mean what I should have another ui-growl style. I created it but it is not help.

 .ui-growl1{
                right:30px;
            }

Upvotes: 0

Views: 319

Answers (2)

Armen Arzumanyan
Armen Arzumanyan

Reputation: 2043

Solution is

<style type="text/css">
                div[id="growl-error_container"]  {
                   // background-color: red !important;
                    right:30px;
                }
                div[id="growl-success_container"] {
                   // background-color: green !important;
                    left: 30px;
                    width: 360px;
                    height: 110px;

                }
            </style>

                <p:growl id="growl-error"  class="ui-growl" showDetail="true" sticky="true" />  

                <p:growl id="growl-success"  showDetail="true"  sticky="true"/>

Upvotes: 0

Alex
Alex

Reputation: 471

You can specify which element of the account to apply the style:

.ui-growl:nth-child(2) {
    right:30px;
}

Upvotes: 1

Related Questions