Primefaces posizionamento personalizzato per un p specifico: growl

Question

Sto usando PrimeFaces 3.3.1. Posso personalizzare i ringhi:

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

Ma personalizza tutti i ringhi. Devo personalizzare solo uno specifico <p:growl>. Voglio dire, voglio mettere solo un ringhio al centro e tutto il resto all'angolo in alto a destra. Come farlo?

Grazie.

Answer 1

Come si può vedere dal codice HTML generato, il componente growl non contiene i dati di ricrescita effettivi. Il messaggio che viene visualizzato nella angolo è attesa da un elemento div:

<div id="your_growl_id + _container"> 

in modo che il selettore CSS corretto per growl sarebbe:

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

(presumo i componenti growl sono posizionati nella stessa modulo). Infine, come si è preso nota nel tuo post se si dispone di due componenti growl sulla tua pagina:

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

solo assegnare le proprietà CSS desiderate per i contenitori Growl centrati e non-centrati:

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

Si noti che puoi utilizzare l'attributo prependId="false" dello <h:form/>. Ciò semplificherebbe i selettori di CSS. Ma si consiglia di non utilizzare questo, vedere UIForm with prependId="false" breaks <f:ajax render>