11

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.

Selcuk
  • 857
  • 2
  • 11
  • 32

1 Answers1

11

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>

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Akos K
  • 7,071
  • 3
  • 33
  • 46
  • With this solution, components under the growl div will be blocked forever. I dont know why but this is the situation. – furkan Nov 20 '16 at 20:16
  • So interesting. After removing height property (only) it works well. Anyway thanks for the solution :) – furkan Nov 20 '16 at 20:39