Primefaces custom positioning for a specific p:growl

Question

I am using PrimeFaces 3.3.1. I can customize growls by:

.ui-growl {
    position:absolute;
    top:50%;
    left:50%;
    z-index:9999;
}

But it customizes all growls. I need to customize just one specific <p:growl>. I mean, I want to place just one growl to the center and all the rest to the top right corner. How to do that?

Thanks.

Answer 1

As you can see from the generated HTML the growl component isn't holding your actual growl data. The message which is appearing in the corner is hold by a div element:

<div id="your_growl_id + _container">

so the correct css selector for growl would be:

div[id="growlForm1:growlCenter_container"] {}

(I assume your growl components are placed into the same form). Finally as you noted in your post if you have two growl components on your page:

<h:form id="growlForm1">
    <p:growl id="growlCenter" showDetail="true" sticky="true" />
    <p:growl id="growlRight" showDetail="true" sticky="true" />  
</h:form>

just assign the desired css properties for the centered and not-centered growl containers:

div[id="growlForm1:growlRight_container"] {
    position:absolute;
    top:20px;
}
div[id="growlForm1:growlCenter_container"] {
    position:absolute;
    top:20px;
    left:40%;
}

Note that you can use the prependId="false" attribute of the <h:form/>. That would simplify the css selectors. But it is advised not to use this, see UIForm with prependId="false" breaks <f:ajax render>